我正在嘗試顯示像這樣的個(gè)人資料照片/ – /(斜線表示使用skewX的斜線,連字符表示水平對(duì)齊的背景圖像).

問題是這段代碼也會(huì)扭曲背景圖像：

.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;

}

...

我試圖像這樣扭轉(zhuǎ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;

}

.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;

}

...

…但我得到/ [ – ] /(背景不適合斜面).

我整天都在這,請(qǐng)你能幫助我嗎？我有編碼器的笨蛋！

總結(jié)

以上是生活随笔為你收集整理的html中如何让图片斜显示,如何在偏斜层(CSS)中扭曲背景图像？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。