Question

我的HTML中有一个部分，它通过CSS附加了背景图像。背景图像遍布整个屏幕，位于文本所在的容器div之外。但是，每次我更改背景图像的不透明度以使其非常轻盈和柔和时，不透明度也会更改文本（因为背景图像绑定到部分ID）。我如何重新处理这个背景图像非常模糊，文字在前面是强烈的？

 <!--services section-->
    <section id="services-head-section">
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <div class="py-5">
                        <div class="wow animated fadeInLeft">
                            <h1 class="display-4"><strong>SERVICES</strong></h1>
                            <p class="lead" style="font-style:italic;">
                                "We can't solve problems by using the same kind of thinking we used when we created them."
                                -Albert Einstein
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row wow animated fadeInUp">
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Engineering</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Product Development</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Computer Applications</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-university fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Training</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
            </div>
        </div>
    </section>

CSS：

#services-head-section   {
    background: url(img/1855JPerkinsSteamGun2.jpg) no-repeat;
    background-size: cover;
}

Answer 1

我做了一个jsfiddle来描述我的意思。 https://jsfiddle.net/ww5tqomd/

您的body标签中将包含两个根级别元素。第一个是你的背景图片，第二个是一个绝对位于背景图像上的容器。

<div class="background-image">

</div>
<div class="content-with-text">
    <h1>Hello world</h1>
</div>


html,body{
    height: 100%;
    width: 100%;
}
.background-image {
    height: 100%;
    width: 100%;
    margin-bottom: -100%;
    background: black;
    opacity: .2;
}

.content-with-text {
    position: absolute;
    top: 0;
    left; 0;
    color: blue;
}

通过这种方式，您可以调整背景的不透明度，而不会影响您的内容，因为从技术上讲，您的内容不是背景容器的子项，而是兄弟。

希望这有帮助

Answer 2

＆＃13;

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(http://is4.mzstatic.com/image/thumb/Purple118/v4/a0/ee/6c/a0ee6c57-b4b2-14f3-ae42-f47ad1dd5aac/source/1200x630bb.jpg);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
  background-size:cover
}

＆＃13;

<!DOCTYPE html>
<html>

<body>

<p>This is some text.</p>

<div style="color:#0000FF">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text.</p>

</body>
</html>

＆＃13;

Answer 3

＆＃13;

#services-head-section {
  position: relative;   
}

#services-head-section::after {  
  background: url('http://lorempixel.com/1800/780/sports/1/') 0 0 no-repeat transparent;
  background-size: 100%;
  bottom: 0;
  content: "";
  left: 0;  
  opacity: 0.6;
  position: absolute;  
  right: 0;
  top: 0;
  z-index: -1;   
}

＆＃13;

<!--services section-->
    <section id="services-head-section">
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <div class="py-5">
                        <div class="wow animated fadeInLeft">
                            <h1 class="display-4"><strong>SERVICES</strong></h1>
                            <p class="lead" style="font-style:italic;">
                                "We can't solve problems by using the same kind of thinking we used when we created them."
                                -Albert Einstein
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row wow animated fadeInUp">
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Engineering</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Product Development</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Computer Applications</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
                <div class="col-md-3 text-center">
                    <span class="fa-stack fa-lg fa-3x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-university fa-stack-1x fa-inverse"></i>
                    </span>
                    <a href="#">
                        <h5 class="text-center">Training</h5>
                    </a>
                    <p class="text-muted text-center">
                        Providing customers with seamless transitions from prototypes to production.
                    </p>
                </div>
            </div>
        </div>
    </section>

＆＃13;

背景图片不透明度

3 个答案: