精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
css基礎系列教程:背景屬性
userphoto

2014.09.24

關注

我們把上一節的作業的答案給大家公布一下:

  1. h1 .p1{}:表示h1標簽下的所有class為p1的選擇符;
  2. #content h1{}表示id為content下的所有h1標簽;
  3. h1 .p1, #content h1并列關系,對class為p1的和ID為#content下的H1作用同一個效果;
  4. h1#content h2{} 表示h1下id為content標簽下的h2標簽,請注意這個地方不是包含沒有空格而是緊接著寫的。必須是屬于H1里面ID為#content下包含H2的。


本節課所使用的背景圖片素材

 

使用背景(background)是網頁設計制作中一種常用手法,網站中隨處可見的導航,整體頁面背景都是通過background完成的。

我們先看一下背景的顏色屬性(background-color),我們可以采用的值:十六進制,顏色名稱,透明的背景.

現在我們通過一個示例來了解一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>divcss8背景顏色示例</title>

    <style type="text/css">

        /*這是CSS的備注形式。為了以后閱讀方便,如果顏色值一樣可以簡寫為#ccc; */

     h1 {background-color:#cccccc;       }

     h2{background-color:red;} 

     /*是默認效果,可以不寫*/

     h3{background-color:trasparent;}

    </style>

</head>

<body>

<h1>十六進制示例</h1>

            <h2>顏色名稱</h2>

      <h3>透明背景</h3>

</body>

</html> PS:顏色值大家可以通過PS去獲取,也可以通過百度搜索獲取

在我們網頁中不只可以使用背景顏色,還可以使用背景圖片屬性background-image定義背景圖象的路徑。但是最好在結合背景圖象的重復屬性background-repeat定義背景圖象的是否重復效果。

最重要的:背景圖象只有在一定的區域范圍內才能顯示,所以在指定背景圖象的時候,通常要定義元素的寬高屬性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>www.divcss.com背景示例</title>

    <style type="text/css">       

    div{background-image:url(3_01.gif); }

    </style>

</head>

<body>

<div>內容1</div>

</body>

</html>

現在這種情況下。背景圖片會鋪滿整個屏幕。但是不會有高度顯示

 

這個問題就是我剛才所重點提到的背景圖象只有在一定的區域范圍內才能顯示.所以說我們可以給DIV指定一個寬(width)與高(height),為了讓大家看的更清楚些。我提供一個邊框。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>www.divcss.com背景示例</title>

    <style type="text/css">       

    div{background-image:url(divcss801.gif); width:500px;height:500px;border:2px solid #f00;}

    </style>

</head>

<body>

<div>內容1</div>

</body>

</html>

大家不知道發現沒。如果使用我們提供的圖片做背景,會出現完全平鋪。因為我們的背景圖片只有寬184PX,高384PX。這也是默認情況。所以說我們可以通過background-repeat這個屬性決定背景圖片如何平鋪。

background-repeat:是指定元素中背景圖象的重復方式。有以下幾種取值方式:

Repeat:完全平鋪;默認情況下,我們可以忽略不寫

no-repeat:在XY均不平鋪;

repeat-xX平鋪;

repeat-yY軸平鋪;

大家可以對上述代碼做個修改。

background-position設置背景圖片在一定區域內的顯示的位置,這個屬性需要設置兩個值,一個是X水平,一個垂直位置,可以使用%,也可使用具體的數值PX,也可以使用:top left|top center |top right | center left  | bottom left這樣結合

 

我們看一個示例:

<html>

<head>

<style type="text/css">

div

{

width:400px;height:400px;border:2px solid #f00;

  background-image:url(css8bj.jpg);

  background-repeat:no-repeat;

  background-position:top right;

}

</style>

</head>

 

<body>

<body>

<div>

<p>在這個示例的圖片寬是208px,高是120px,在我們不平鋪的時候,默認是DIV的左上角,如果按我們樣式所設置則在頂部右上角,當然你也可以使用百分比和PX值進行</p>

</div>

</body>

</body>

</html>

在上述代碼情況下如果我們想讓我們上邊的背景圖片不顯示第一行與第一列怎么辦呢。我們還可以為背景位置設置負的值

<html>

<head>

<style type="text/css">

div

{

width:400px;height:400px;border:2px solid #f00;

  background-image:url(css8bj.jpg);

  background-repeat:no-repeat;

  background-position:-73px -38px;

}

</style>

</head>

 

<body>

<body>

<div>

<p>在這個示例的圖片寬是208px,高是120px,在我們不平鋪的時候,默認是DIV的左上角,73px -38px,我們使用負的值是為了向左偏移以及向上偏移</p>

</div>

</body>

</body>

</html>

 

而且我們的背景圖片也可以結合顏色在一塊來用,當背景圖片沒有顯示的時候就用顏色進行填充。我們現在看一個示例。

<html>

<head>

<style type="text/css">

body

{

 

  background-image:url(divcss801.gif);

  background-repeat:repeat-x;

  background-position:0 0

background-color:#055269;

}

</style>

</head>

 

<body>

<body>

<div>

<p>我們網頁背景沿X軸平鋪的時候,如果沒有占滿其它地方可以用背景顏色代替</p>

</div>

</body>

</body>

</html>

這個地方的背景顏色取值是根據背景圖片決定的。大家可以用PS看一下這個背景圖片最下方的顏色是不是我們現在使用的。

我們學了之前這么多內容,其實背景還可以簡寫,形式如下:

Background:background-color顏色 | background-image背景圖片路徑 | background-repeat 是否平鋪 | background-position 位置| background-attachment 是否滾動

強調一下:在使用簡寫的時候必須是Background,如果是用bakcground-image:只能寫圖片位置,不能再加其它。那么我看一個示例

<html>

<head>

<style type="text/css">

body

{

background:#055269 url(divcss801.gif) repeat-x 0 0;

}

</style>

</head>

 

<body>

<body>

<div>

<p>我們的背景沿X軸平鋪的時候,如果沒有占滿其它地方可以用背景顏色代替</p>

</div>

</body>

</body>

</html>

本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Div CSS布局入門教程(二)
11種常用css樣式之background學習
CSS復習Day02
使用CSS設置邊框和背景
CSS中背景background-position負值定位深入理解[圖文]
html+css如何在圖片上添加文字
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 连平县| 中西区| 社会| 阜南县| 新绛县| 鄂托克旗| 龙口市| 营山县| 饶河县| 湟源县| 扬中市| 富民县| 徐水县| 赣州市| 贵定县| 红桥区| 安庆市| 咸阳市| 虎林市| 武鸣县| 宁城县| 宁蒗| 通榆县| 措勤县| 新巴尔虎右旗| 苏尼特右旗| 武汉市| 左贡县| 乐清市| 衡水市| 鄢陵县| 海丰县| 旺苍县| 白银市| 镇沅| 忻州市| 新源县| 嘉峪关市| 宽甸| 乌苏市| 阳山县|