Question

目前，我正在为一个社区工作，网站有点困难，我有一个很好的pink> orange渐变，下面的图像的opacity为0.2，可以同时显示这两个图像。看起来像这样。

如您所见，徽标也具有不透明性。我已经找到了有关rgba颜色的信息，但这没用。

如何解决此问题？我希望带有边框的图像具有完全的不透明度。

body {
  background-color: #f2f2f2;
  color: #404040;
}

div.navbar {
  height: 600px;
  background: rgba(255, 255, 255, 0.7);
  background-image: linear-gradient(25deg, #ec008c, #fc6767);
  margin-top: -10px;
  margin-left: -5px;
  position: relative;
  width: 105%;
}

img.logo {
  position: absolute;
  margin-top: 4%;
  margin-left: 25%;
  height: 40%;
  padding: 25px;
  border: 25px solid #f2f2f2;
  border-radius: 50%;
}

div.image {
  position: relative;
  height: 100%;
  opacity: 0.2;
  background-image: url("img/slide1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

div.nav {
  position: absolute;
  bottom: 0;
  margin-left: 600px;
  margin-bottom: 50px;
}

a.nav-item {
  color: #f2f2f2;
  font-weight: bold;
  font-size: 25pt;
  margin-right: 50px;
  text-decoration: underline;
}

a.nav-item:hover,
a.nav-item .active {
  text-decoration: overline underline;
}

<div class="navbar">
  <img class="logo" src="img/logo.png">
  <div class="image">
  </div>
  <div class="nav">
    <a class="nav-item">Home</a>
    <a class="nav-item">Twee</a>
  </div>
</div>

Answer 1

对图像和渐变使用background属性。然后从您的十六进制值的rgba等效项中获取渐变（Chrome开发工具颜色选择器非常适合此操作）。

body {
  margin: 0;
}

div.navbar {
	height: 100vh;
  
  /*
    IMPORTANT BITS:
    - ADDED image and gradient to navbar background and
    - REMOVED opacity
    
    THE REST:
    The rest was just to make the demo look better/simpler
  */
	background:
    linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
    url(http://placeimg.com/1000/600/arch) no-repeat center;
  background-size: cover;

	position: relative; 
}

.logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 0;
  padding-top: 25%;
  border:25px solid #f2f2f2;
  border-radius: 50%;
  overflow: hidden;
}
.logo {
  width: 90%;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 5%;
}

<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
  <div class="navbar">
    <div class="logo-wrapper">
      <img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
    </div>
  </div>
</body>
</html>

Answer 2

由于浏览器管理不透明度的方式，子项无法覆盖父项的不透明度。

实现此目的的最简单方法是将可视子项放置在父项之后，然后使用负边距顶部将子项绘制在父项之上。您不需要绝对定位。

.frame{
        background-color: #AAAAAA;
        opacity: 0.2;
        border-radius: 13px;
        padding: 21px;
        color: #000000;
        height: 73px;
}
.frametxt{
        margin-top: -73px;
        color: #000000 !important;
        opacity: 1.0;
}

孩子如何克服父母的不透明度？

2 个答案: