Как сделать прозрачную рамку (с помощью CSS) над фоновым изображением?

часть границы

Я хочу сделать границу вокруг моего div прозрачной. Я хочу, чтобы фоновое изображение показывалось через прозрачную границу. На моем изображении вы можете видеть, что мой код создает прозрачную рамку, но белый цвет просвечивает вместо фонового изображения. Независимо от того, какого размера я делаю границу, это в основном увеличивает пустое пространство, чтобы соответствовать границе.

Ниже приведен мой код, который включает границу .mainbody и фоновое изображение. Я думаю, что, возможно, мой код мешает прозрачности границы фонового изображения.

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

css background-image border transparency
person cphil    schedule 02.02.2015    source источник
comment
может актуально? stackoverflow.com/questions/2626039/   -  person Marc B    schedule 03.02.2015
comment
@MarcB да, background-clip: padding-box - это ответ   -  person vals    schedule 03.02.2015
comment
@MarcB Это было очень полезно. Спасибо.   -  person cphil    schedule 03.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

Может быть, это поможет вам

* {
    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;
}

И HTML:

<body>
  <div class="mainbody">Hello<div class="other"></div></div>
</body>
person fcastillo    schedule 02.02.2015
comment
Это также повлияет на непрозрачность элементов внутри .mainbody. - person Kevin Boucher; 03.02.2015
comment
Я плохо понимаю, чего вы хотите, и я думаю, что теперь это работает - person fcastillo; 03.02.2015