如何風格背景圖片CSS

你好我試圖通過使用代碼來想，我怎麼能風格，我已經加載CSS的圖像，我這樣做：如何風格背景圖片CSS

.news1 { 
content: url("https://i.vimeocdn.com/portrait/58832_300x300"); 
}

我又試圖樣式該通過這樣做：

.news1 img:hover { 
-moz-transform: scale(1.1); 
-webkit-transform: scale(1.1); 
    transform: scale(1.1); 
}

我然後也嘗試：

.news1 content:hover { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
     transform: scale(1.1); 
    }

來源

2016-12-15 Ronnie Gurr

看來，如果您的圖像沒有經過HTML - 標籤，而是通過純CSS – Manticore

有沒有辦法'content'將在這裏工作定義。 –

如果您嘗試在CSS中設置背景圖像，則應該使用background屬性設置圖像。

.news1 { 
 
    background-image: url("https://i.vimeocdn.com/portrait/58832_300x300"); 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    background-size: cover; 
 
    height:300px; 
 
    width: 300px; 
 
    transition: all .4s ease; 
 
} 
 

 
.news1:hover { 
 
    transform: scale(1.1); 
 
}

<div class="news1"></div>

來源

2016-12-15 00:18:55 bob

我嘗試使用背景屬性，但它將圖像的高度更改爲約20像素，但仍然保持寬度 –

@RonnieGurr，您將需要設置背景圖像所在的div的高度。它可能會保持寬度，因爲它是一個塊元素，高度可能只有20px，因爲這是內容的高度。如果你想要圖像採取它的自然尺寸，你應該將其設置爲html – bob

中的img'元素，我這樣做了，但現在當我嘗試將文本放在背景圖像的頂部時，它根本不顯示 –

背景圖像和內容圖像不是分開的元件，它們是理論值的定型e元素被聲明。

例如，而不是使用：

.news1 img:hover { 
    /* ... */ 
}

你可以使用：

.news1:hover { 
    /* ... */ 
}

如果你真的想從元素分別樣式的圖像時，圖像必須有它自己的元件。這可以以內部img元素的形式，或通過將圖像作爲其他內部元素的背景來放置。

來源

2016-12-15 00:16:57 Ouroborus

如何風格背景圖片CSS

回答

相關問題