logo标签列表

响应式或透明的背景图像

jqueryhtmlcsstwitter-bootstrap
3

我正在创建一个带有背景图片的容器。在桌面或更大尺寸上没有问题。但是当窗口大小调整时，文本会出现在图像的顶部，并且文本变得不可读。您有关于此的解决方案吗？也许可以在较小的尺寸下更改图像的不透明度或完全删除背景图像并使用img src代替？这里是一个fiddle

<div class=" network container-fluid">
<div class="row">
    <div class="container">
        <div class="col-md-6"></div>
        <div class="col-md-6">
             <h1> Lorem Ipsume</h1>

            <br>
            <br>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
        </div>
        <br>
    </div>
</div>


.network {
    background: url(http://i.imgur.com/w5BnMSf.png), #f6f8f8;
    background-repeat: no-repeat;
    height: 50%;
    background-attachment: fixed;
    background-size: contain;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.network h1 {
    font-family:'Open Sans', arial, sans-serif;
    font-weight: 300;
    font-size: 49.4000015258789px;
    color: dimgray;
    padding-top: 40px;
}
.network p {
    font-family:'Open Sans', arial, sans-serif;
    font-weight: 300;
    font-size: 19.4000015258789px;
    color: dimgray;
    text-align: justify;
}
4个回答
2
您可以使用媒体查询来在达到特定高度时更改透明度或删除背景。您可以根据高度/宽度/两者等使用媒体查询...

Fiddle - 通过上下拉动css框和预览框之间的分隔符来调整iframe的高度。

.network {
    position: relative;
    height: 50%;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.network::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(http://i.imgur.com/w5BnMSf.png) , #f6f8f8;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    content: '';
}

@media (max-height: 700px) { /** play with the numbers to find the right height **/
  .network::before {
    opacity: 0.5;
  }
}

@media (max-height: 500px) { /** play with the numbers to find the right height **/
  .network::before {
    display: none;
  }
}
1
我可以帮助您进行翻译。以下是需要翻译的内容：

我修改了您的HTML和CSS，我认为这是您想要的结果：

HTML：

  <div class=" network container-fluid">
        <div class="row">
            <div class="container">
                <div class="col-xs-6 img pull-left"></div>
                <div class="col-xs-6 pull-left">
                  <h1> Lorem Ipsume</h1>
                <br>
                <br>

               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>  
                </div>

                    <br style="clear:both;" />
        </div>


        </div>
    </div>

CSS：
.img {
    background: url(http://i.imgur.com/w5BnMSf.png);
    background-repeat: no-repeat;
    height: 500px;
    background-size: contain;
    background-position:50% 50%;
}
.network {
    background-color:#f6f8f8;
    height: auto;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.network h1 {
         font-family: 'Open Sans', arial, sans-serif;
         font-weight: 300;
         font-size: 49.4000015258789px;
         color: dimgray;
         padding-top: 40px;
}
.network p {
        font-family: 'Open Sans', arial, sans-serif;
        font-weight: 300;
        font-size: 19.4000015258789px;
         color: dimgray;
        text-align: justify;
}

这里有一个JsFiddle的解决方案。

希望能对你有所帮助 :-)

谢谢，这个可以用！但是我能把图片变大吗？ - Pantelis
欢迎，是的，但不建议这样做，因为响应速度会受到影响 :) - Fadi Obaji
1

你也可以在小屏幕上使用文本阴影技巧。

https://jsfiddle.net/azvmaby1/

@media (max-width: 768px){
p {
    text-shadow: #f6f8f8 1px 0px, #f6f8f8 1px 1px, #f6f8f8 0px 1px, #f6f8f8 -1px 1px, #f6f8f8 -1px 0px, #f6f8f8 -1px -1px, #f6f8f8 0px -1px, #f6f8f8 1px -1px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px;
}
}
0
我使用透明或半透明的 div 容器来展示我的文本，这样可以留下深刻印象。
以下是实现方法：透明 附注：不透明度应该根据具体情况而定。
.container{background:rgba(255,255,255,0.6);}
  1. 你也可以使用半透明模糊
.container{
  -webkit-filter: blur(10px);
  filter: url('blur.svg');/*look below for creating blur.svg*/
  filter: blur(10px);
}

创建 blur.svg // 将内容复制到一个文件中并保存为 blur.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>
使图片透明的代码是什么？ - Pantelis
如果您将此代码添加到图片的div标签中，它将使用高斯模糊使文本清晰，但是请将包含图片的div设置为绝对定位。一个不好的事情是它会使所有子元素都模糊。参考：http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ - joyBlanks
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接