Question

我试图在中心有一个背景图像，但不透明度很低。每次我编写代码时，它都在中心或低不透明度但不同时。我应该怎么做？

  <head>
<style>
body { 
    background-image: url('image.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
  }
</style>
</head>

但是，下面的代码是为图像提供不透明度但不一定将其置于中心的代码

image{
    background:url('image.png');
    background-size:100%;
    height: 250px;
    width: 200px;
    position: fixed;
    left:0;
    right:0;
    z-index: -1;
    filter:opacity(30%);
    -webkit-filter:opacity(30%);
}
.heading{
    z-index: 2;
    position: fixed;
    left: 10px;
}
.color{
    height: 150px;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    background-color:#ffffff;

}

Answer 1

你可以尝试使用伪元素并将其放在内容之下，然后像这样简单地控制不透明度属性：

body {
  margin: 0;
  padding: 50px;
  position: relative;
  background: red; /* added this to see the effect of opacity */
}

body p {
  position: relative;
  z-index: 1;
  color: #fff;
}

body:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(https://lorempixel.com/1000/800/);
  /* Control image position */
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /* -- */
  z-index: 0;
  opacity: 0.5;
  /* control opacity with this*/
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel vehicula nibh. Aliquam sit amet risus urna. Mauris ac faucibus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc dapibus urna velit,
  vitae tincidunt nulla semper quis. Morbi ullamcorper ex erat. Donec magna ipsum, efficitur ac commodo nec, dapibus at lacus. Morbi vitae maximus est, mattis ornare lorem. Sed pellentesque lacus est, non finibus lectus molestie quis. Maecenas sit amet
  consectetur massa. Sed aliquet pharetra tellus, efficitur venenatis nisl fermentum non. Nu</p>

Answer 2

在一个元素上声明你的背景图像，你可以将其作为一个单独的关注点与其他页面元素一起保持，并相应地进一步设置样式，比如调整opacity，这是我建议探索的方法。

归因于相关元素的样式：

.site-bg {
  background-image: url(https://lorempixel.com/1000/800/);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
  z-index: -1;
  background-size: cover;
  background-position: center center
}

下面嵌入了一个代码片段，用于演示实现指定预期结果的直接方法，利用一些常见的网站元素和结构为演示添加更多上下文。

＆＃13;

$('#toggle-content, #gaaah-hide-it').on('click', function() {
  $('.article-body').fadeToggle();
});

＆＃13;

* {
  box-sizing: border-box;
}

body {
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

footer {
  margin-top: 20px;
}

.article-body {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

article {
  flex-basis: 70%;
  padding: 10px;
  background: white;
  border-right: 1px solid #ddd;
}

aside {
  flex-basis: 30%;
  background: whitesmoke;
  padding: 10px;
}

.site-bg {
  background-image: url(https://lorempixel.com/1000/800/);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
  z-index: -1;
  background-size: cover;
  background-position: center center
}

#toggle-content {
  cursor: pointer;
  transition: .7s;
  background: transparent;
  padding: 5px;
}

#toggle-content:hover {
  background: black;
  color: white;
}

#gaaah-hide-it {
  border-radius: 100%;
  float: right;
  border: 1px solid;
  width: 20px;
  text-align: center;
  transition: .7s;
  background: whitesmoke;
  cursor: pointer;
}

#gaaah-hide-it:hover {
  background: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <head>
    <!-- Only here for context to help you better understand -->
  </head>
  <div class="site-bg">
    <!-- You'll use this arbitrary div here to attribute your background-image styles to -->
  </div>
  <header>
    <h1>Here be dragons</h1>
  </header>
  <p>What will this look like with some page content? <span id="toggle-content">click here</span></p>
  <section class="article-body" style="display: none;">
    <article>
      <h2>I did a code</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Aute proident, deserunt in exercitation dolore exercitation consequat. sunt Excepteur nulla proident, sit fugiat pariatur. cupidatat laborum. ut pariatur. quis eiusmod minim incididunt voluptate enim anim laborum. aliqua. eu aliquip et nisi proident,
        cupidatat in sed esse dolore minim anim non deserunt mollit Lorem proident, magna incididunt sed et exercitation officia aliqua. nisi anim et mollit nisi dolore do aliqua. labore.</p>
      <p>Culpa tempor aliqua. cillum laborum. consectetur quis ut amet, qui ut deserunt consectetur consectetur incididunt officia proident, culpa laboris eiusmod irure sed aliquip aute sunt adipisicing reprehenderit nulla sint dolore eu quis aliquip officia
        amet, mollit quis dolor nostrud velit nostrud laboris esse nulla id ut aute et reprehenderit officia do Ut in magna laborum. nulla sed in do mollit ullamco.</p>
    </article>
    <aside>
      <span id="gaaah-hide-it" title="hide me, I'm shy">&times;</span> Some things on the side...
    </aside>
  </section>
  <footer>
    <!-- Only here for context to help you better understand -->
  </footer>
</body>

＆＃13;

如何在不透明度低的中心拍摄背景图像？

2 个答案: