Cut Ecken von Bild mit CSS

Ich möchte Bild Ecken mit transperenten Hintergrund schneiden. Ich habe folgenden Code geschrieben.Cut Ecken von Bild mit CSS

body{ 
 
    background-image:url('http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg'); 
 
} 
 

 
.Image{ 
 
position:absolute; 
 
    width:200px; 
 
    height:200px; 
 
} 
 

 
.Image img{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.Image:before { 
 
    position: absolute; 
 
    content: ""; 
 
    border-top: 60px solid red; 
 
    border-right: 60px solid transparent; 
 
    top: -1px; 
 
    left: -1px; 
 
} 
 
.Image:after { 
 
    position: absolute; 
 
    content: ""; 
 
    border-bottom: 60px solid red; 
 
    border-left: 60px solid transparent; 
 
    bottom: -1px; 
 
    right: -1px; 
 
} 
 

 
.blackBg{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    background:rgba(0,0,0,0.6); 
 
}

<div class="blackBg"></div> 
 

 
<div class="Image"> 
 
    <img src="http://www.w3schools.com/css/img_fjords.jpg"> 
 
    </div>

Wie kann ich Bildecken mit CSS schneiden, auch will ich nicht für diese Leinwand oder svg verwenden. Ich würde es gerne in reinem CSS machen, gibt es irgendwelche Methoden?

Ich möchte Form wie diese.

Quelle

2016-12-30 vedankita kumbhar

css verwenden Sie es nicht tun können. Verwenden Sie Photoshop :) –

Was meinen Sie mit Ecken schneiden, brauchen Sie abgerundete Ecken? – Jeet

Nein, ich will keine abgerundete Ecke. Was auch immer ich in Snippet geschrieben habe. Darin möchte ich Transparenz statt roter Farbe. –

Rotat e der Container 45 Grad nach rechts, Set Überlauf auf ihm versteckt. und die Höhe vergrößern, damit die unerwünschten Ecken nicht abgeschnitten werden.

Drehen Sie das Bild -45deg, so dass es wieder horizontal ist.

und Sie sind fertig:

body { 
 
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg'); 
 
} 
 
.Image { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 400px; 
 
    transform: rotate(45deg); 
 
    overflow: hidden; 
 
    margin-top: -100px; 
 
} 
 
.Image img { 
 
    width: 100%; 
 
    height: 50%; 
 
    margin-top: 100px; 
 
    transform: rotate(-45deg); 
 
} 
 
.blackBg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.6); 
 
}

<div class="blackBg"></div> 
 

 
<div class="Image"> 
 
    <img src="http://www.w3schools.com/css/img_fjords.jpg"> 
 
</div>

Quelle

2016-12-30 15:37:09 vals

Sie werden (hoffentlich) bald in der Lage sein border-corner-shape wie diese zu verwenden, bevor (jetzt abgerundeten Ecken erscheinen als Rückfall) Ihre und keine Notwendigkeit zu verwenden Pseudo-Elemente

body{ 
 
    background:green; 
 
} 
 

 
.Image{ 
 
position:absolute; 
 
    width:200px; 
 
    height:200px; 
 
} 
 

 
.Image img{ 
 
    width:100%; 
 
    height:100%; 
 
    border-corner-shape: bevel; 
 
    border-radius:30px 0 30px 0; 
 
} 
 

 
.blackBg{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    background:rgba(0,0,0,0.6); 
 
}

<div class="blackBg"></div> 
 

 
<div class="Image"> 
 
    <img src="http://www.w3schools.com/css/img_fjords.jpg"> 
 
    </div>

Quelle

2016-12-30 08:57:35

entfernt und nach Pseudoteil und hinzugefügtem Clippfad-Styling.

body{ 
 
    background-image:url('http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg'); 
 
} 
 

 
.Image{ 
 
    position:absolute; 
 
    width:200px; 
 
    height:200px; 
 
} 
 

 
.Image img{ 
 
    width:100%; 
 
    height:100%; 
 
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 86%, 0% 20%); 
 
    clip-path: polygon(20% 0%, 80% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 86%, 0% 20%); 
 
} 
 
} 
 

 
.blackBg{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    background:rgba(0,0,0,0.6); 
 
}

<div class="blackBg"></div> 
 

 
<div class="Image"> 
 
    <img src="http://www.w3schools.com/css/img_fjords.jpg"> 
 
    </div>

Quelle

2016-12-30 09:00:12 aavrug

Danke. Ist es kompatibel zu allen Browsern? –

clip-path arbeitet nur mit Chrome. Gibt es eine andere Möglichkeit, dies zu tun? –

Lassen Sie mich überprüfen, oder Wenn dies nicht mit Firefox funktioniert, dann lass mich eine andere Lösung versuchen. – aavrug

können Sie achive Wunsch führen durch zusätzliches Element hinzugefügt oder durch CSS-Pseudoelemente: before &: nach

body{background:#fff;} 
 
.img-ctnr{position:relative;} 
 
.img{width:450px;height:300px;background:purple;} 
 
.img-ctnr:before,.img-ctnr:after{ 
 
    content:'';position:absolute;display:block; 
 
    width:100px;height:100px; 
 
    background:#fff; 
 
    transform:rotate(45deg); 
 
} 
 
.img-ctnr:before{top:-50px;left:-50px;} 
 
.img-ctnr:after{top:250px;left:400px;}

<div class="img-ctnr"> 
 
    <div class="img"></div> 
 
</div>

Quelle

2016-12-30 10:19:12

Ich verwende Hintergrundbild hinter diesem div, deshalb kann ich nicht Hintergrund verwenden: #fff; bis nachher –

Cut Ecken von Bild mit CSS

Antwort

Verwandte Themen