Tôi đang cố gắng hiển thị ảnh tiểu sử như thế này/-/(dấu gạch chéo biểu thị các đoạn nghiêng bằng skewX, dấu gạch nối đại diện cho hình nền được căn chỉnh theo chiều ngang).Làm cách nào để hủy kích hoạt hình nền trong lớp bị lệch (CSS)?
Vấn đề là mã này cũng lệch hình nền:
.photo {
transform: skewX(35deg);
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px;
height: 92px;
border-right: 1px solid black;
border-left: 1px solid black;
background-image: url('silhouette.png');
background-repeat: no-repeat;
background-position: top left;
}
...
<div class="photo"></div>
tôi đã cố gắng để đảo ngược nền nghiêng như thế này:
.photo {
transform: skewX(35deg);
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px;
height: 92px;
border-right: 1px solid black;
border-left: 1px solid black;
}
.photo div {
transform: skewX(-35deg);
-ms-transform: skewX(-35deg); /* IE 9 */
-webkit-transform: skewX(-35deg); /* Safari and Chrome */
width: 100%;
height: 100%;
background-image: url('silhouette.png');
background-repeat: no-repeat;
background-position: top left;
}
...
<div class="photo"><div></div></div>
... nhưng tôi nhận/[ -]/(nền không vừa vặn với các slants).
Tôi đã ở đây cả ngày, vui lòng bạn có thể giúp tôi không? Tôi đã có bock của coder!