如何制作一个覆盖背景图像的透明边框（使用CSS）？
我想在我的div周围做一个透明的边框。我希望背景图像通过透明边框显示。在我的图片中，您可以看到我的代码制作了一个透明的边框，但是白色显示出来，而不是背景图像。无论我制作的边框大小如何，它基本上都会增加空白以适应边框 下面是我的代码，包括.mainbody的边框和背景图像。我在想，可能是我的代码干扰了背景图像的边界透明度如何制作一个覆盖背景图像的透明边框（使用CSS）？,css,border,background-image,transparency,Css,Border,Background Image,Transparency,我想在我的div周围做一个透明的边框。我希望背景图像通过透明边框显示。在我的图片中，您可以看到我的代码制作了一个透明的边框，但是白色显示出来，而不是背景图像。无论我制作的边框大小如何，它基本上都会增加空白以适应边框 下面是我的代码，包括.mainbody的边框和背景图像。我在想，可能是我的代码干扰了背景图像的边界透明度 .mainbody { max-width: 1500px; height: auto; background: white; margin-to
.mainbody {
max-width: 1500px;
height: auto;
background: white;
margin-top: -27px;
border: 10px dashed rgba(236, 200, 236, .5);
}
body {
background: url("https://scenesfromphiladelphia.files.wordpress.com/2010/02/026.jpg");
background-size: cover;
background-position: center;
text-align: left;
text-indent: 50px;
color: 000000;
font-family: Bree Serif;
max-width: 800px;
margin: auto;
}
* {
box-sizing: border-box;
}
.mainbody {
position: relative;
max-width: 1500px;
height: auto;
padding: 10px;
}
.other {
border: 10px dashed rgba(236, 200, 236, .5);
position: absolute;
background: transparent;
opacity: .5;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
body {
background: url("https://scenesfromphiladelphia.files.wordpress.com/2010/02/026.jpg");
background-size: cover;
background-position: center;
text-align: left;
text-indent: 50px;
color: 000000;
font-family: Bree Serif;
max-width: 800px;
margin: auto;
}
<body>
<div class="mainbody">Hello<div class="other"></div></div>
</body>
你好
.mainbody