«Прозрачная» рамка вокруг предметов на фоне
Было несколько вопросов относительно какой-то прозрачной границы, но я думаю, что это не то, что я ищу.
Это может быть очень глупо, но: возможно ли каким-то образом иметь элементы (эти белые квадраты) на фоне (черная текстура), причем каждый из этих элементов имеет границу, которая «удаляет» фон для границы 10 пикселей (или любой другой)? Итак, у вас есть непрерывный фон, и каждый элемент на нем «вырезает» какую-то его часть. Истинная «прозрачная» граница (как и другие вопросы), очевидно, просто позволит вам увидеть фон, так что я не это имею в виду.
Если нет, то как можно добиться такого адаптивного дизайна?
Извините, я не знаю другого способа объяснить это. Спасибо.
См. Пример / скрипку здесь: jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}<div id = "main_header"></div>
<div id = "main_footer">
<div id = "icons"></div>
</div>Предполагая, что каждый из этих квадратов является div, вы можете дать им ширину границы 4px и установить цвет границы на rgba (0,0,0,0). Последний 0 устанавливает непрозрачность на 0.
@MichaelSorensen, я понимаю, что черные части должны смешиваться / плавно переходить в фуксию .... режим наложения может работать, а не непрозрачность;) Код OP отсутствует, чтобы в конечном итоге иметь реальную подсказку
@MrLister да звучит хорошо для двух границ, если белые полосы сохранены;)
См. Пример / скрипт здесь: jsfiddle.net/14nn2pLy Ya, цвет границы на прозрачный, делает границу прозрачной. Тогда у вас нет границы, потому что вы видите фон. Цель состоит в том, чтобы «убрать» фон для места вокруг предметов ...
Я думаю, вы можете добиться этого, повторяя фон и используя маску SVG. Вместо учебника я свяжу вам этот пример кода, который, на мой взгляд, подходит к делу.
О, хорошо, может быть, так. Спасибо. Посмотрим на это.
Ответы 2
Мой мыслительный процесс
Единственный способ, который я могу придумать, - это сделать границу того же цвета, что и фон (в вашем случае это оттенок розового), но учтите, что это возможно только при наличии сплошного цвета фона.
Пример:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}<div class = "bg">
<div class = "border">black border</div>
<div class = "no-border">"transparent" border</div>
</div>Решение:
Желаемый эффект возможен при использовании clip-path на заднем плане. Обратите внимание, что я также изменил HTML и CSS, иначе это не сработает. clip-path используется для вырезать той части фонового изображения, которая вам не нужна, поэтому она становится прозрачный и активируется при наведении курсора.
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}<div class = "container">
<div class = "icon">
<img src = "https://i.imgur.com/V2eI4Rm.png" alt = "icon">
</div>
<div class = "bg">
<img src = "https://i.imgur.com/D3V3ZYq.png" alt = "background">
</div>
</div>Спасибо, но твердого фона нет / не должно быть. Так что, как я предполагал, вероятно, нет. Но как же тогда это делается в разных дизайнах и еще много чего? Я часто видел, что у элемента есть «граница», чтобы выделяться на фоне. Хм.
Вы можете редактировать изображения в фотошопе так, как вы хотите, но я не могу придумать, как сделать это с помощью CSS. У вас есть лучший пример, на который я могу взглянуть?
Да, я могу сделать иконки частично прозрачными. Не решает то, чего я хочу достичь, потому что, как только появляется что-то прозрачное, фон явно просвечивает. Хм, это скорее общий вопрос, а не конкретный пример. Но да, пусть значок будет поверх фона, но чтобы значок «выделялся», нужно «удалить» фон вокруг этого элемента. Не знаю, как еще я могу объяснить, но вы понимаете, о чем я, а? Если бы не CSS, что было бы тогда? Спасибо.
"удалить фон вокруг этого объекта", как бы это выглядело? Потому что все, о чем я могу думать, - это сплошная цветная рамка вокруг этого значка, которая делает вид, будто фон исчез. Если вы говорите о содержимом вокруг значка, вы всегда можете увеличить поле. Не могли бы вы дать мне фон (изображение) и значок, на котором вы бы хотели, чтобы он работал, чтобы я мог поиграть с ним?
Я предполагаю, что это невозможно, просто было интересно, как такой дизайн выполняется в других случаях. Вот изображения: Первые два оригинальных прозрачных png. последние два JPG в качестве примеров, как это должно быть. image.ibb.co/iFYoM7/bg.pngimage.ibb.co/mxpjuS/icon.pngimage.ibb.co/emFPuS/icon_on_bg_border.jpgimage.ibb.co/bLQPuS/icon_on_bg_noborder.jpg
Спасибо, это очень поможет. Я сделаю это с утра!
Просто убедись, что я правильно тебя понимаю, это то, что ты хочешь, верно? Но затем, чтобы иметь возможность использовать не сплошной фон, например изображение, чтобы был виден тот же эффект? JSFiddle
Точно, на заднем плане есть что угодно, поэтому он должен просвечивать сквозь прозрачные места на фоне элемента и границу вокруг значка ... Большое спасибо.
Это то, что вы хотели? Если да, я дам ответ, чтобы вы могли принять его как официальный ответ. В противном случае я буду рад помочь вам в дальнейшем. Мне нравится вызов :)
Что ж, пример был таким, каким я хотел на первый взгляд, но, как вы сказали, должна быть возможность «использовать не сплошной фон, например изображение, чтобы был виден тот же эффект». Но я не думаю, что это возможно, так что ...
Не так быстро! Мне удалось создать эффект с помощью clip-path. Добиться желаемого эффекта невероятно утомительно, особенно если вам нужно более одного такого значка, но не это возможно. Я обновил свой ответ, отметьте его как принятый, я приложил много усилий :)
Пожалуйста. До сих пор это была моя самая интересная задача, спасибо!
вы можете создать изображение с прозрачным фоном и использовать его как изображение границы.
.background {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background-color: #fd1dfa;
z-index: 1 !important;
}
.background:after {
content: "";
display: table;
clear: both;
}
hr {
border: 10px solid white;
position: relative;
top: 100px;
z-index: 5 !important;
}
.center {
position: relative;
width: 50px;
height: 50px;
background-color: #fd1dfa;
color: #ffffff;
padding: 10px;
z-index: 10 !important;
}
.border {
position: relative;
z-index: 8 !important;
margin: 30px;
width: 70px;
height: 70px;
float: left;
background: white;
border: 10px solid transparent;
border-image:
}<div class = "background">
<hr>
<div class = "border">
<div class = "center">
text and words
</div>
</div>
<div class = "border">
<div class = "center">
text and words
</div>
</div>
<div class = "border">
<div class = "center">
text and words
</div>
</div>
</div>Спасибо, но нет, так как на границе есть "цвет фона", который не делает ее "прозрачной".
@ Гримвуд, хорошо. может что-то с холстом или svg. последнее изменение настолько близко, насколько я могу
есть ли какой-либо код, который может показать вашу проблему и, в конечном итоге, ваши неудачные попытки? возможно, есть метод css, а может и нет, коды, изображения и браузеры нацелены на это;) Можете ли вы прояснить вопрос