Jquery 响应或透明背景图像

我正在创建一个带有背景图像的容器。我没有问题，在桌面或更大的尺寸。但是，当窗口调整大小时，文本出现在图像的顶部，文本变得不可读。你有解决这个问题的办法吗？可能会改变图像的不透明度，或者完全删除背景图像，使用img src替代？这里有一个

---

我对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>

这里有一个解决方案

---

希望这有帮助：-）

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

以下是如何做到：：透明

--PS：不透明度是你感觉合适时的决定

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

您还可以使用半透明模糊

创建blur.svg//将内容复制到文件中并将其另存为blur.svg

---

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

-通过上下拉动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;
  }
}

---

你也可以在一个小屏幕上进行文字阴影特技

---

这会使图片透明吗？是的，如果你将其添加到div pic标记中，它将使用高斯模糊，因此文本清晰，但使div保持pic绝对，一个不好的事情是，它会使所有子对象模糊。参考资料：谢谢你的工作！但是我可以放大图像吗？欢迎，是的，但不推荐，因为响应速度：）

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

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

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