css trong suốt hình dạng qua hình ảnh

Question

This is what i am trying to achive

tôi có:

#image1 { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    align-self: auto; 
 
    background-color: #dc022e; 
 
    width: 340px; 
 
    height: 100px; 
 
    border-radius: 50%/100%; 
 
    border-bottom-left-radius: 0; 
 
    /*transform: rotate(10deg);*/ 
 
    border-bottom-right-radius: 0; 
 
    opacity: 0.8; 
 
    } 
 
    
 
    #image2 img { 
 
    width: 80%; 
 
    }

<div> 
 
    <div id="image2"> 
 
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"> 
 
    </div> 
 
    <div id="image1"></div> 
 
</div>

Cuối cùng tôi không biết làm thế nào để làm cho nó xoay và với biên độ cắt như trong hình

Answer 1

Ví dụ nhanh về điều này sẽ sử dụng phần tử giả và đặt hình ảnh ở chế độ nền.

div { 
 
    position: relative; 
 
    height: 300px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/500/300);/*image path*/ 
 
    overflow: hidden;/*hides the rest of the circle*/ 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; /*positions with reference to div*/ 
 
    top: 100%; 
 
    left: 50%; 
 
    width: 0;/*define value if you didn't want hover*/ 
 
    height: 0; 
 
    border-radius: 50%; 
 
    background: tomato;/*could be rgba value (you can remove opacity then)*/ 
 
    opacity: 0.5; 
 
    transform: translate(-50%, -50%);/*ensures it is in center of image*/ 
 
    transition: all 0.4s; 
 
} 
 

 

 
/*Demo Only*/ 
 
div:hover:before {/*place this in your pseudo declaration to remove the hover*/ 
 
    height: 100%; 
 
    width: 150%;/*this makes the shape wider than square*/ 
 
    transform: translate(-50%, -50%) rotate(5deg);/*ensures it is in center of image + rotates*/ 
 
} 
 
div {/*This stuff is for the text*/ 
 
    font-size: 40px; 
 
    line-height: 300px; 
 
    text-align: center; 
 
}

<div>HOVER ME</div>

Answer 2

Bạn chỉ có thể sử dụng position: absolute cho hình ảnh của mình và position: relative cho lớp phủ, quảng cáo của bạn justing vị trí hàng đầu và chiều rộng theo nhu cầu của bạn. Đây là Fiddle. Hi vọng điêu nay co ich!

Chỉnh sửa: Đây là số updated version của Fiddle thể hiện đường viền và thuộc tính tràn trên vùng chứa img. Như CBroe đã đề cập, xoay vòng tròn có lẽ không phải là cách sử dụng tốt thời gian của bạn trong trường hợp này. Ngoài ra, tôi chắc chắn đồng ý rằng việc sử dụng phần tử giả là một cách tiếp cận sạch hơn nhiều so với việc lồng hình ảnh.

Answer 3

Thay vào đó các yếu tố lồng nhau, bạn chỉ có thể sử dụng một yếu tố giả. Điều này được đặt ở dưới cùng của div vùng chứa. Để làm việc này, bạn cần position:relative và overflow:hidden trên div vùng chứa. Ngoài ra, các phần tử giả luôn cần khai báo content.

Để sửa đổi bán kính đường viền, bạn chỉ cần phát xung quanh với left | width | height của phần tử giả. Bạn không cần bất kỳ vòng quay nào.

Thay vì màu hex và độ mờ, bạn cũng có thể sử dụng không gian màu "mới" rgba(r,g,b,a) trong đó a là giá trị độ mờ.

Đối với passepartout bạn chỉ cần sử dụng tuyên bố border.

#image2{ 
 
    position:relative; 
 
    border:10px solid #888; 
 
    overflow:hidden; 
 
    box-shadow:0 0 4px #aaa; 
 
} 
 

 
#image2::after { 
 
    content:""; 
 
    display:block; 
 
    position: absolute; 
 
    bottom: 0;left:-10%; 
 
    background-color: #dc022e; 
 
    width: 120%; 
 
    height: 60%; 
 
    border-radius: 100% 100% 0 0; 
 
    opacity: 0.8; 
 
} 
 
    
 
#image2 img { 
 
    width: 100%; 
 
    display:block; 
 
    position:relative; 
 
}

<div id="image2"> 
 
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"> 
 
    </div>