|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本章給大家介紹css3如何區分background-clip和background-origin?(代碼實例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。在css3中,background-clip和background-origin它們2個的功能大致相同,但又有些細微差別。 一、background-clip屬性 background-clip:規定背景的繪制區域,當背景是純顏色時與圖片時,它的顯示方式又不一樣。它有3種屬性:border-box、padding-box、content-box. 1. border-box:背景是從邊框開始繪制,但當背景是圖片時,它是左邊和上邊是沒有繪制圖片,但下邊和右邊有; 代碼: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width:433px;
height:200px;
padding:50px;
background-color: red;
background-image:url('8.jpg');
background-repeat:no-repeat;
-webkit-background-clip:border-box;
border:10px dashed #92b901;
}
</style>
</head>
<body>
<div>
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
</div>
</body>
</html>效果圖:
2. padding-box:背景在邊框內部繪制(不包括邊框); 3. content-box:背景從內容部分繪制; 二、background-origin屬性 background-origin:規定背景圖片的定位區域,它的屬性也有border-box、padding-box、content-box 這3種屬性,但要注意他的描述是“背景圖片”,也就是說它只能對背景做樣式上的操作,它相當于positon,規定了圖片開始繪制的的區域,也就是它只相當于規定圖片的左上角從什么地方開始,其他的它就不負責了; <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 500px;
height: 300px;
/*padding: 50px;*/
background-color: red;
background-image: url('8.jpg');
background-repeat: no-repeat;
-webkit-background-origin: content-box;
background-size: 500px 380px;
border: 10px dashed #92b901;
}
</style>
</head>
<body>
<div>
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
</div>
</body>
</html>效果圖:
background-origin:繪制圖片時,是可以從邊框開始的,但有可能會被邊框覆蓋掉一些內容,如上面的第二幅圖片 以上就是css3如何區分background-clip和background-origin ?(代碼實例)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!