gpt4 book ai didi

html -
CSS透明背景

转载 作者:技术小花猫 更新时间:2023-10-29 12:47:01 25 4
gpt4 key购买 nike

对于那些迫不及待的人 Fiddle

我在 CSS 中遇到了这个问题。 html的结构和 css代码看起来像这样

HTML:

<div class="one">
<div class="two">
<div class="three">

</div>
</div>
</div>

CSS:

.one{
width: 500px;
height: 500px;
background: url('http://www.moonlightcompanies.com/wp-content/uploads/2013/01/6973_MOONF-PomegranatesOnTree-8536-1.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}

.two{
width: 300px;
height: 300px;
background: blue;
padding: 20px;
}

.three{
width: 200px;
height: 200px;
background: transparent;
padding: 20px;
border: 5px solid yellow;
}

我的问题是如何制作 <div class="three"></div> 的背景它是透明的并且会融入 <div class="one"></div> 的背景.我希望我想要的输出像附加的图像一样。这可能吗?

enter image description here

最佳答案

你可以这样试试: Demo

.three{
width: 200px;
height: 200px;
background: transparent;
padding: 20px;
border: 5px solid yellow;
outline:solid 100px rgba(0,0,255,.5);
}

根据您的要求更新边框值。

已更新 Demo

.three {
background: transparent;
border: solid blue;
margin: 10px 0px;
border-width:20px 40px 40px 20px;
}
.inner {
outline: 5px solid yellow;
width: 200px;
height: 60px;
margin:0;
padding: 20px;
}

关于html - <div> CSS透明背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30475040/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com