答案 0 :(得分:3)
当然可以!这将在IE9 +以及所有其他现代浏览器中正常工作。
归功于Craig Buckler's doc on applying CSS3 transformations to background images
#myelement {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
margin: 20px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url('https://placeimg.com/200/200/any') 0 0 repeat;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

<div id="myelement"></div>
&#13;
答案 1 :(得分:1)
非常简单。试试这个
.square {
width: 100px;
height: 100px;
margin: 25px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
overflow: hidden;
}
.pic {
background: url(http://placekitten.com/g/150/150);
width: 150px;
height: 150px;
margin: -25px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="square">
<div class="pic">
</div>
</div>