简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS3關於background-size屬性的詳細介紹

php中世界最好的语言
發布： 2017-11-30 16:34:49
原創
2702 人瀏覽過

我們知道，在CSS3裡有一項很重要的屬性，bachground-size屬性，它的作用就是定義背景圖片的大小，值有5種，auto , 像素值 ,百分比 , cover , contain。今天就教大家如何使用bachground-size屬性。

background-size:auto，預設值，以圖片自身大小填滿元素，根據元素大小來調節自身比例，不會讓圖片變形。

CSS3關於background-size屬性

1.

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style></head><body>
<div></div></body></html>
登入後複製

2.背景圖片本身大小—width:200px ，height:133px ，上述程式碼的效果圖如下：

像素值，例如 30px 50px，分別表示width height

CSS3關於background-size屬性

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style></head><body>
<div></div></body></html>
登入後複製


#相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

Css3中transform屬性的使用教學

Css3中的border-image屬性詳細介紹

前端專案裡定位幾種方式

#

以上是CSS3關於background-size屬性的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
background-size css3
來源：php.cn
上一篇：CSS3實現旋轉光環效果的實現步驟 下一篇：CSS3關於translate屬性的詳細介紹
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PX自動轉換為REM錯誤 <style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...
來自於 2024-04-16 09:34:16
0
0
4687
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
為什麼我的 hr 標籤設定為白色純色時是半透明的？ 我有一個html（帶有引導程式）和一個CSS，在我的html中我有一個<hr>標籤，它有一個類，然後在我的CSS中我有它的邊框樣式。它是半透明的，你可以看到白色，但它不...
來自於 2024-04-06 16:13:26
0
1
500
顯示隱藏的側邊面板：選中 我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...
來自於 2024-04-06 15:49:33
0
1
319
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！