Question

我正在创建一个背景图片背后的容器。我在桌面或更大的尺寸上没有问题。但是，当窗口调整大小时，文本会出现在图像的顶部，文本变得不可读。你对此有解决方案吗？也许改变较小尺寸的图像的不透明度或完全删除背景图像并使用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;
}

Answer 1

您可以使用媒体查询来更改不透明度，或在达到特定高度时删除背景。您可以根据高度/宽度/两者等进行媒体查询...

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;
  }
}

Answer 2

我稍微修改了你的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;
}

以下是See this answer

中的解决方案

希望这会有所帮助： - ）

Answer 3

您还可以在小屏幕上制作文字阴影技巧。

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;
}
}

Answer 4

我使用透明或半透明的div来保存我的文字，以便留下印象

以下是:: 透明

- PS：当感觉不对时，不透明度就是你的电话

.container{background:rgba(255,255,255,0.6);}

您还可以使用半透明模糊

.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>

响应或透明背景图像

4 个答案: