Html 透明背景<；部门>；CSS

对于那些迫不及待的人

我在CSS中有这个问题。

html

和

css

代码的结构如下所示

HTML:

我的问题是如何使

的背景透明并与

的背景混合。我希望我想要的输出像附加的图像一样。这可能吗

---

您可以这样尝试：

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

.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;
}

根据您的要求更新边框值

更新

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

.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;
}

---

我能与这个特殊案例取得的最接近的结果：

.two{
width: 250px;
height: 250px;
background: trasparent;
padding: 0px;
border-top: 20px solid blue;
border-right: 60px solid blue;
border-bottom: 60px solid blue;
border-left: 20px solid blue;
}

---

根据您更新的小提琴：

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

.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 class="one">
    <div class="two">
        <div class="three"></div>
        <div class="three"></div>
        <div class="three"></div>
    </div>
</div>

试试这个

---

我添加了

：before

和

：after

以及右侧和底部的蓝色背景，以便在第二个

div

中添加更多内容

这是小提琴-

试试这个例子：(

) 请使用矩形图像，从中心看应该是透明的，如下面的示例所示

---

jsfiddle.net/MxspA/6/

背景是透明的，但对其父对象是透明的，其父对象的背景颜色是-蓝色。考虑“切换”div，<代码>第二版/代码> div将是透明的，而<代码>第三>代码> div将是蓝色背景。背景三是透明的，但两个不是透明的。这是相关的：我可以问一下为什么你没有用A来发布你的代码吗？你甚至把html和css分开，整合起来只需几秒钟。考虑一下这一点，而不是使用像JSFIDLE这样的外部服务。这很好。先生：我还有一个问题。我已经更新了小提琴，如果我有这样的结构呢？我该怎么做，先生？：）不管怎样，非常感谢你的回答我有了一些想法，但我仍然有悬而未决的问题：）提前谢谢你，先生。太棒了：）非常感谢，先生。祝你有一个美好的一天：）很高兴我的答案帮助了你：）也许它也帮助了你：和检查浏览器兼容性良好使用大纲+1！您可能会提到，长方体阴影可以具有相同的输出，并在所有四个面上对蓝色部分的宽度提供更多的控制。这也有效，先生：）我还有一个问题。我已经更新了我的小提琴jsfiddle.net/johnsemblante/ouy9thkk/5，如果我有这种结构呢？我该怎么做，先生？：）不管怎样，谢谢你的回答：）谢谢你，先生。

jsfiddle.net/MxspA/6/