Прозрачный фон позади гибкого элемента
У меня есть следующий код:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
grid-template-areas: usrdscr;
}
main .usrcontainer {
grid-area: usrdscr;
display: flex;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
background-color: rgba(6, 6, 92, 0.335);
width: 100%;
}
main .usrcontainer .imgbkg {
background-color: transparent;
align-self: center;
}
main .usrcontainer .imgbkg img {
max-height: 105px;
justify-content: right;
}
main .usrcontainer p {
color: black;
align-content: center;
padding-left: 20px;
min-height: 130px;
}
main .usrcontainer .usrdscr {
width: 90%;
}
main .usrcontainer .price {
font-size: xx-large;
max-width: 120px;
text-align: left;
padding-right: 40px;
}
main .usrcontainer .pricenote {
text-align: left;
align-content: end;
padding-bottom: 10px;
}
main .usrcontainer .stars {
justify-self: center;
align-self: start;
padding: 30px;
}
</style>
</head>
<body>
<main>
<div class = "usrcontainer">
<div class = "imgbkg"><img src = "https://source.unsplash.com/random/105x105" alt = "Foto usuário redondo"></div>
<p class = "usrdscr">Name, <strong>Job</strong> <img src = "https://source.unsplash.com/random/15x15"
alt = "Map pin"> 5Km
<br><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus vero ex debitis eligendi sed
non maxime vitae molestias aperiam quos.
</p>
<div class = "cardpreco">
<img class = "stars" src = "https://source.unsplash.com/random/200x15" alt = "4 Estreas">
<p class = "price">R$200,00 / hora</p>
<p class = "pricenote">Lorem, ipsum dolor.</p>
</div>
</div>
</main>
</body>
</html>
Я пытаюсь сделать так, чтобы первое изображение (которое находится внутри div «imgbkg») не имело за собой цвета фона. Теперь первое изображение использует тот же цвет фона, что и div «usrcontainer». Я попытался установить «цвет фона: прозрачный», как показано, но это не сработало. Я попытался выполнить поиск и обнаружил, что использование «flex: 1» может помочь, но все равно. Любая помощь с этим, пожалуйста????
Чтобы было более понятно, теперь я получаю следующее:
И я пытаюсь сделать что-то вроде этого:
Здравствуйте, хочу уточнить. Я думаю, вы хотели, чтобы изображение внутри imgbkg div растягивалось до высоты контейнера, я прав? Я попробовал воспроизвести ваш пример, фон здесь правильно применен jsfiddle.net/8sbtj0a3
Тай за проверку моего вопроса. Я обновил его, чтобы было более понятно.
В этом случае вы можете думать об этом наоборот: вы хотели придать тексту цвет фона. Вы можете поместить весь текст/содержимое в правой части изображения в один контейнер, а затем назначить этому контейнеру цвет фона. jsfiddle.net/rqh5p3bx/3
Ответы 1
Могу ли я сделать так, чтобы первое изображение (то есть внутри imgbkg div) не имело background-color?
Нет, сделать это невозможно, пока .imgbkg находится внутри .usrcontainer. Но вы можете добиться этого, если вынесете его наружу, а затем обернете .imgbkg и .usrcontainer в гибкий контейнер и с небольшой помощью настроек CSS (я добавил комментарии в CSS).
body {
padding: 0;
margin: 0;
grid-template-areas: usrdscr;
}
/* Added new class */
.wrapper {
display: flex;
box-sizing: border-box;
width: 100%;
}
/* this one to make sure it's aligned with .usrdscr */
.imgbkg {
align-content: center;
}
main .usrcontainer {
/* grid-area have no effect without display: grid */
/* grid-area: usrdscr; */
display: flex;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
background-color: rgba(6, 6, 92, 0.335);
width: 100%;
}
main .usrcontainer .imgbkg {
background-color: transparent;
align-self: center;
}
main .usrcontainer .imgbkg img {
max-height: 105px;
justify-content: right;
}
main .usrcontainer p {
color: black;
align-content: center;
/* commented this to make text closer to image */
/* padding-left: 20px; */
min-height: 130px;
}
main .usrcontainer .usrdscr {
width: 90%;
}
main .usrcontainer .price {
font-size: xx-large;
max-width: 120px;
text-align: left;
padding-right: 40px;
}
main .usrcontainer .pricenote {
text-align: left;
align-content: end;
padding-bottom: 10px;
}
main .usrcontainer .stars {
justify-self: center;
align-self: start;
padding: 30px;
}<main>
<div class = "wrapper">
<div class = "imgbkg"><img src = "https://source.unsplash.com/random/105x105" alt = "Foto usuário redondo" /></div>
<div class = "usrcontainer">
<p class = "usrdscr">
Name, <strong>Job</strong> <img src = "https://source.unsplash.com/random/15x15" alt = "Map pin" /> 5Km <br /><br />Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus vero ex
debitis eligendi sed non maxime vitae molestias aperiam quos.
</p>
<div class = "cardpreco">
<img class = "stars" src = "https://source.unsplash.com/random/200x15" alt = "4 Estreas" />
<p class = "price">R$200,00 / hora</p>
<p class = "pricenote">Lorem, ipsum dolor.</p>
</div>
</div>
</div>
</main>Ты очень! Это работает, я думаю, что понимаю, что произошло после вашего объяснения, поскольку изображение находилось внутри элемента div с установленным фоновым цветом, который он использовал. Ты очень!
проверьте, является ли ваш img png (имеет прозрачный фон)