Как сделать так, чтобы изображение было solid белым вместо полупрозрачного белого? - PullRequest
Новая
       0

Как сделать так, чтобы изображение было solid белым вместо полупрозрачного белого?

0 голосов
/ 16 марта 2020

У меня есть два изображения, которые по сути должны быть друг на друге. Lo go каким-то образом застрял в непрозрачном белом цвете, а не в solid белом, который хочет мой клиент. Как это исправить?

HTML & CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PALPA | Tunes for the Toasties</title>
</head>
<style>
    body{
        background-image:url("../img/background-min.JPG");
        background-size: 100%;
        background-repeat: no-repeat;

    }
    #palpa_white{
        height: 550px;
        width: 490px;
        margin-left: 240px;


    }

    .center_container{
        height: 580px;
        width: 1000px;
        background-color: black;
        opacity: 0.7;
        margin-left: 22%;
        margin-top: 9%;
    }


</style>
<body>
    <div class = "center_container">
            <img src = "../img/palpa_white.png" id = "palpa_white" alt = "kael_logo">
    </div>

</body>
</html>

Изображение проблемы

Ответы [ 2 ]

1 голос
/ 16 марта 2020

Ваш CSS указывает opacity: 0.7 для center_container деления. Поэтому дочерний тег img также наследует непрозрачность 70%.

Вам необходимо переопределить непрозрачность для стиля #palpa_white. 

    #palpa_white{
        height: 550px;
        width: 490px;
        margin-left: 240px;
        opacity: 1;
    }
0 голосов
/ 16 марта 2020

Вам нужно изменить opacity: 0.7; на opacity: 1; в разделе стиля #palpa-white. Вот демонстрация этого: 

.body {
border-radius: 10px;
max-width: 500px;
height: 300px;
margin: 0.01em auto;
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}
h1 {
color: #ffffff;
text-align: center;
}
body {
background: #121212;
font-family: 'Overpass', sans-serif;
}
.body #before {
position: relative;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
max-width: 250px;
height: 100px;
margin: 0.01em auto;
opacity: 0.7;
border-radius: 10px;
}
.body #after {
position: relative;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
max-width: 250px;
height: 100px;
margin: 0.01em auto;
opacity: 1;
border-radius: 10px;
}
body::-webkit-scrollbar {
  width: 1em;
}
body::-webkit-scrollbar-track {
 background: #121212;
 border: none;
}
body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-image:  -webkit-linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
            }
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300&display=swap" rel="stylesheet">
<h1>Before</h1>
<div class='body'>
  <div id='before'>
  </div>
</div>
<h1>After</h1>
<div class='body'>
  <div id='after'>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...