时间戳

首页 > 解决方案 > 网页的CSS透明背景图片

css - 网页的CSS透明背景图片

问题描述

我一直在尝试将背景图像设置为在 CSS 上透明，以便文本更加突出。我还是很新，我真的不明白网上的任何解释，当我按照其他教程的说明进行操作时，我的仍然不透明。一些消息来源提出了一个伪元素，我尝试过但失败了。什么是让背景图像在 CSS 上透明而无需完全重新组织 div 和其他任何东西的最简单方法是什么？提前致谢

body, 
html {
    font-size: 20px;
    color:white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {    
    background-color: gray;
    background-image: url(images/photo3.jpg);

    background-repeat: no-repeat;
    background-size: cover;
    background-position:relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}



header {
    width: 1024px;
    height: 118px;
    text-align: center;
    color: white;
    font-size: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-top: 50px;

}
    
nav {
    width: 1024px;
    box-sizing: border-box;
    padding-left: 100px;
    padding-right: 100px;
    color: red;
    background-color: rgba(0, 0, 0, 0.00);
    text-align: center;
}

nav a {
    box-sizing: border-box;
    font-size: 25px;
    padding-left: 10px;
    padding-right: 10px;

}
main {
    width: 1024px;
    min-height: 100%;
    padding-top: 10px;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;

}

.main-about {
    width: 1024px;
    height: 1000px;
    padding-top: 10px;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
}


footer {  
    width: 1024px;
    height: 200px;
    padding-left:100px;
    padding-right:100px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    margin-top: auto;

}

h2 {
        font-size: 30px;
        color: white;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    

p {
    font-size: 20px;
    color:white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

a {
    color:lightcyan;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

标签： cssbackgroundtransparent

解决方案

您不能通过将背景放在包含元素（如 body）上来做到这一点，因为如果您设置该元素的不透明度，其所有内容也将是半透明的。

您可以做的是附加一个伪元素来表示 body 并使其具有视口的大小（或 body - 这取决于您在这里想要什么）并将该伪元素的不透明度设置为小于 1。

这是一个使用问题中代码的简单示例：

body,
html {
  font-size: 20px;
  color: white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background-color: gray;
  background-image: url(https://picsum.photos/id/1015/300/300);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: relative;
  /* this is not the kind of position meant for backgrounds */
  background-position: center center;
  height: 100vh;
  width: 100vw;
  opacity: 0.5
}

header {
  width: 1024px;
  height: 118px;
  text-align: center;
  color: white;
  font-size: 50px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding-top: 50px;
}

nav {
  width: 1024px;
  box-sizing: border-box;
  padding-left: 100px;
  padding-right: 100px;
  color: red;
  background-color: rgba(0, 0, 0, 0.00);
  text-align: center;
}

nav a {
  box-sizing: border-box;
  font-size: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

main {
  width: 1024px;
  min-height: 100%;
  padding-top: 10px;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}

.main-about {
  width: 1024px;
  height: 1000px;
  padding-top: 10px;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}

footer {
  width: 1024px;
  height: 200px;
  padding-left: 100px;
  padding-right: 100px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
  margin-top: auto;
}

h2 {
  font-size: 30px;
  color: white;
  font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

p {
  font-size: 20px;
  color: white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

a {
  color: lightcyan;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
<body></body>

推荐阅读