Как создавать background прозрачный негр, не теряя качества прозрачного background в ясных фондах?

У меня есть меню плавающей навигации с одним background прозрачный негр, цвет прозрачного фона увиден очень довольно только, когда он находится в фондах или темных изображениях или темных средних показателях или сильных цветах.

Но в ясных цветах (ясная Мишень, серый) вместо того, чтобы отображать один background прозрачный негр, увиден серый прозрачный цвет.

Сейчас существует способ создавать один background прозрачный негр, без того, чтобы он затронул цвет после того, как был в ясных фондах.

Я попытался используя эти две формы background прозрачный негр.

 background: rgba(34,34,34,0.75);
 background-color: rgba(0,0,0,0.1);

но Ваш цвет меняется в ясных фондах.

Пример цвета прозрачного фона, поскольку Ваш цвет меняется в цвете ясных фондов

.div1{
  height: 80px;
  background: #fff;
  padding-top: 20px !important;
}

.div2{
  color:#fff;
  height: 40px;
  background: rgba(34,34,34,0.75);
}
.div3{
  color:#fff;
  height: 40px;
  background-color: rgba(0,0,0,0.1);
}

.div4{
  height:80px;
  background-image: url(http://www.tommasosignori.it/img/macbook-air-all-faded-and-stuff.jpg);
}

.div5 {
  color:#fff;
  height: 40px;
  background: rgba(34,34,34,0.75);
}
.div6{
  height:80px;
  background-image: url(http://www.themeinthebox.com/demo/color/images/slider/bg1.jpg);
}

.div7{
  height:80px;
  background-image: url(http://www.tommasosignori.it/img/macbook-air-all-faded-and-stuff.jpg);
}

.div8{
  color:#fff;
  height: 40px;
  background-color: rgba(0,0,0,0.1);
}

ul li a {
  padding: 10px;
  color: #9d9d9d;
}

ul li {
  display: inline-block;
  list-style-type: none;
  text-align: left;
}
<div class="div1">
 <div class="div2">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div1">
 <div class="div3">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div4">
 <div class="div5">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div6">
 <div class="div5">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div7">
 <div class="div8">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>
2
задан 06.08.2017, 20:15
1 ответ

Сделай это более матовым. Последняя цифра контролирует матовость и ты имеешь 0.1. Пока больше под самым прозрачным числом цвет и меньше он "влияет" на цвет фона. Я верю в то, что один 0.8 он может подавать тебя.

.div1{
  height: 80px;
  background: #fff;
  padding-top: 20px !important;
}

.div2{
  color:#fff;
  height: 40px;
  background: rgba(0,0,0,0.8);
}
.div3{
  color:#fff;
  height: 40px;
  background-color: rgba(0,0,0,0.8);
}

.div4{
  height:80px;
  background-image: url(http://www.tommasosignori.it/img/macbook-air-all-faded-and-stuff.jpg);
}

.div5 {
  color:#fff;
  height: 40px;
  background: rgba(0,0,0,0.8);    }
.div6{
  height:80px;
  background-image: url(http://www.themeinthebox.com/demo/color/images/slider/bg1.jpg);
}

.div7{
  height:80px;
  background-image: url(http://www.tommasosignori.it/img/macbook-air-all-faded-and-stuff.jpg);
}

.div8{
  color:#fff;
  height: 40px;
  background-color: rgba(0,0,0,0.8);
}

ul li a {
  padding: 10px;
  color: #9d9d9d;
}

ul li {
  display: inline-block;
  list-style-type: none;
  text-align: left;
}
<div class="div1">
 <div class="div2">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div1">
 <div class="div3">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div4">
 <div class="div5">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div6">
 <div class="div5">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div7">
 <div class="div8">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>
1
ответ дан 24.11.2019, 13:14
  • 1
    Совершенный @devconcept он увиден очень хорошо в ясных фондах, но в темных фондах men и # 250; navegaci и # 243; n он оказывается полностью черным, не совсем совершенная правда:) привет. – Otto 01.10.2016, 00:08