CSS<背景>

smartlion 發布于2019-08-30 15:54 / 3296人閱讀

摘要：背景概覽有幾個很棒的背景屬性，它們提供了對背景更強大的控制。規定背景的繪制區域。數值定義設置背景圖像的高度和寬度。

1.css3簡介

CSS3是CSS（層疊樣式表）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

2.css3背景

概覽
有幾個很棒的背景屬性，它們提供了對背景更強大的控制。

backgroud-size：規定背景圖片的尺寸。

background-orgin：規定背景圖片的定位區域。

backgroud-clip:規定背景的繪制區域。

<瀏覽器的支持>
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera (這些瀏覽器支持css3背景屬性）

(1)baground-size(規定背景圖片的尺寸)

body{

background: url(給你的背景插入一張圖片）
background-size（規定你背景圖的大小）
background-repeat（使你的背景圖向下延伸）
padding-top（你的背景距離頂部的距離）

}
設置背景尺寸的方式有如上四種方法。
<*數值定義>

設置背景圖像的高度和寬度。
第一個值設置寬度，第二個值設置高度。
如果只設置一個值，則第二個值會被設置為 auto。
<*百分比>（略）

(2)background-orgin(規定背景圖片的定位區域)

body{

background-origin:content-box;(背景圖像填充框的相對位置)

background-origin:border-box;(背景圖像邊界框的相對位置)

background-origin:padding-box;(背景圖像的相對位置的內容框)

}
背景圖的位置

（3）backgroud-clip(規定背景的繪制區域)

body{

background-clip:content-box;背景繪制在內容方框內（剪切成內容方框）
background-clip:padding-box; 背景繪制在襯距方框內（剪切成襯距方框）
background-clip:border-box;默認值。背景繪制在邊框方框內（剪切成邊框方框）
}

附：###背景- 簡寫屬性###

在以上實例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。

為了簡化這些屬性的代碼，我們可以將這些屬性合并在同一個屬性中.

背景顏色的簡寫屬性為 "background":

body {background:#ffffff url("img_tree.png") no-repeat right top;}

注：以上內容若有錯誤請及時告訴我。

GPU云服務器云服務器 python &lt&gt java &lt=&gt java&lt &gt asp &lt&gt

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116865.html

前端基礎-CSS的屬性相關設置

摘要：值描述左邊對齊默認值右對齊居中對齊兩端對齊文本裝飾為重點值描述默認。繼承父元素的屬性的值。具體的像素一定要加單位例如，等等第一個值是水平位置，第二個值是垂直位置。單位是像素或任何其他的單位。一字體屬性二文本屬性三背景屬性四盒子模型五盒子模型各部分詳解一、字體屬性1、font-weight：文字粗細（表格中*為重點）取值描述normal默認值，標準粗細bord粗體 *border...

番茄西紅柿 2019-04-23 13:41 評論0 收藏0
CSS<背景>

摘要：背景概覽有幾個很棒的背景屬性，它們提供了對背景更強大的控制。規定背景的繪制區域。數值定義設置背景圖像的高度和寬度。1.css3簡介 CSS3是CSS（層疊樣式表）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。 2.css3背景概覽有幾個很棒的背景屬性，它們提...

番茄西紅柿 2019-04-23 13:32 評論0 收藏0
html和css的使用方法以及樣式

摘要：浮動的元素脫離文檔流解決方式一給父元素添加超出部分隱藏解決方式二在父元素內容最后添加擁有清除浮動屬性的元素。布局步驟第一步：清除默認樣式第二步：劃分模塊第三步：設置模塊的大小以及位置第四步：劃分下一級模塊html和css引入網頁頭像 <linkrel="shortcuticon"href="img/...ico">css樣式表...

番茄西紅柿 2019-04-23 11:46 評論0 收藏0
一個后端開發者的前端語言基礎：HTML5 & CSS

摘要：每個標簽可有一個獨立的號。該標簽是一個內聯元素，與塊級元素相反，內聯元素不會自動在前后自動放置換行符，因此內聯元素會默認在同一行顯示。前端語言基礎：HTML5 & CSS (一) HTML5：超文本標記語言 (1) 基本概念是由一系列成對出現的元素標簽(標記)嵌套組合而成 ( XML也是標簽構成的 )這些標簽以<標簽名稱>的形式出現，用于標記文本內容的含義瀏覽器通過元素標...

superPershing 2019-08-30 15:56 評論0 收藏0