mam to:Border obraz z kryciem
.striped-border {
border: 8px solid transparent;
border-image: url(../img/stripes.png) 9 round;
}
Czego chcę:
Czy można zastosować krycie do granicy wizerunku tylko a nie treść?
mam to:Border obraz z kryciem
.striped-border {
border: 8px solid transparent;
border-image: url(../img/stripes.png) 9 round;
}
Czego chcę:
Czy można zastosować krycie do granicy wizerunku tylko a nie treść?
Można użyć pseudo-element
stworzyć granicę z border-image
a następnie ustawić opacity
.
div {
position: relative;
margin: 50px;
font-size: 25px;
padding: 10px 25px;
display: inline-block;
}
div:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid transparent;
border-image: url('http://www.circlek.org/Libraries/2013_branding_design_elements/graphic_CKI_horizontal_stripesblue_RGB.sflb.ashx') 22 22 repeat;
transform: translate(-5px, -5px);
opacity: 0.4;
}
<div>Element</div>
<div>Element <br> lorem</div>
Wielkie dzieki! zaktualizowane skrzypce w celach informacyjnych: https://jsfiddle.net/bu6xt7pc/ –
Pytanie uzupełniające: Podczas dodawania formularza, z wprowadzeniem i przyciskiem, są one wyświetlane, ale najwyraźniej wyłączone. Masz pomysł, aby je włączyć? Dzięki jeszcze raz! https://jsfiddle.net/bu6xt7pc/3/ –
Co o coś podobnego:
.striped-border:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
border:8px solid rgba(256,256,256, 0.5);
}
nie wydają się działać : https://jsfiddle.net/xd1s93hb/ –
rgba nie będzie działać. OP potrzebuje obrazu obramowania, a nie tylko jednolitego koloru. Biorąc to pod uwagę ... Pseudoelementy są drogą do zrobienia. –
Jacques Marais, spróbuj ustawić górny, lewy, dolny, prawy do 8px. upewnij się, że .striped-border: po jest z twojego elementu – Mohsen
Dodaj border-image do pseudo-elementu i użyć krycie –
@ rozwiązania Nenad za: https://jsfiddle.net/bu6xt7pc/1/ –