① 用一句css代碼能夠同時設置背景顏色、背景圖片、背景圖片是否重復、背景圖片位置
可以的。
可以用background屬性設置這些css樣式。如:"background: #0f0 url('images/bg.png') no-repeat 0 center;"。
② css用於控制網頁的背景圖片的屬性正確的是
用css設置網頁中的背景圖片,主要有如下幾個屬性:
1,背景顏色 {">說明:參數取值和顏色屬性一樣注意:在HTML當中,要為某個對象加上背景色只有一種辦法,那就是先做一個表格,在表格中設置完背景色,再把對象放進單元格。這樣做比較麻煩,不但代碼較多,還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕松地直接搞定了,而且對象的范圍很廣,可以是一段文字,也可以只是一個單詞或一個字母。例子:給部分文字加背景顏色給部分文字加背景顏色表格背影顏色:
代碼示例:
style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">
2.背景圖片:background-image
語法:{background-image: url(URL)|none}說明: URL就是背景圖片的存放路徑。如果用「none」來代替背景圖片的存放路徑,將什麼也不顯示。例子:給部分文字加背景圖片
代碼示例:
.imgbgstyle { background-image: url(logo.gif)}
3.背景重復:background-repeat
語法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}作用:背景圖片重復控制的是背景圖片平鋪與否,也就是說,結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片
說明:參數取值范圍:
·inherit 繼承·no-repeat 不重復平鋪背景圖片·repeat·repeat-x 使圖片只在水平方向上平鋪·repeat-y 使圖片只在垂直方向上平鋪
注意:如果不指定背景圖片重復屬性,瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。
4.背景固定:background-attachment
語法:{background-attachment:fixed|scroll}說明:參數取值范圍
·fixed:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,固定不動·scroll:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,一起滾動
注意:背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性,瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時傷害瀏覽者的視力,所以可以解除背景圖片和文字內容的捆綁,該為和瀏覽器窗口捆綁。
例子:使背景圖案不隨文字「滾動」的CSS
代碼示例:
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5.背景定位:background-position
語法:{background-position:數值|top|bottom|left|right|center}作用:背景定位用於控制背景圖片在網頁中顯示的位置。說明:參數取值范圍
·帶長度單位的數字參數·top:相對前景對象頂對齊·bottom:相對前景對象底對齊·left:相對前景對象左對齊·right:相對前景對象右對齊·center:相對前景對象中心對齊
·比例關系
關鍵字解釋:top left = left top = 0% 0%
③ css 怎麼設置背景圖片的重復次數
CSS中是不能設置背景圖片的重復次數,不過可以做出重復次數的效果。
例如,你的一張圖片如果是X軸重復3次,寬為100px;那麼你就可以寫
img{background:url(圖片地址)repeat-x;height:50px;width:300px;}
這樣子就可以了。
CSS(層疊樣式表)級聯樣式表是一種用來表現HTML(標准通用標記語言的一個應用)或XML(標准通用標記語言的一個子集)等文件樣式的計算機語言。
④ 如何讓網頁背景圖片不重復顯示
現在一般都用css設定了,比如在一個div下設背景圖片切不讓其重復,則可設一個樣式,比如:
.nobgrepeat{background:url(背景圖片地址) left top no-repeat;}
(這個樣式可以直接放在網頁文件head標簽對的<style></style>標簽對中,然後在調用時直接用<div class="nobgrepeat"></div>,也可以另外放在單獨的css文件中)
left:直接用left代表背景圖片靠到div最左邊,可以用數字代替,比如10px,來控制背景圖片距離該div左邊的距離。
top:同left
另外取值還有:right;bottom;center看你自己如何取了。
repeat的取值還有repeat-x,repeat-y,分別表示沿x軸重復和y軸重復。
background還有個fixed屬性,我沒用過,你可以自己用用看看
⑤ CSS語法的背景重復
如果需要在頁面上對背景圖像進行平鋪,可以使用 background-repeat 屬性。
屬性值 repeat 導致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復,no-repeat 則不允許圖像在任何方向上平鋪。
默認地,背景圖像將從一個元素的左上角開始。請看下面的例子:
body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }背景定位
可以利用 background-position 屬性改變圖像在背景中的位置。
下面的例子在 body 元素中將一個背景圖像居中放置:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:center; }為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right和 center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或5cm,最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。 圖像放置關鍵字最容易理解,其作用如其名稱所表明的。例如,top right 使圖像放置在元素內邊距區的右上角。
根據規范,位置關鍵字可以按任何順序出現,只要保證不超過兩個關鍵字 - 一個對應水平方向,另一個對象垂直方向。
如果只出現一個關鍵字,則認為另一個關鍵字是 center。
所以,如果希望每個段落的中部上方出現一個圖像,只需聲明如下:
p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }下面是等價的位置關鍵字: 單一關鍵字 等價的關鍵字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left 百分數值的表現方式更為復雜。假設你希望用百分數值將圖像在其元素中居中,這很容易:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }這會導致圖像適當放置,其中心與其元素的中心對齊。換句話說,百分數值同時應用於元素和圖像。也就是說,圖像中描述為 50% 50% 的點(中心點)與元素中描述為 50% 50% 的點(中心點)對齊。
如果圖像位於 0% 0%,其左上角將放在元素內邊距區的左上角。如果圖像位置是 100% 100%,會使圖像的右下角放在右邊距的右下角。
因此,如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處,可以這樣聲明:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; }如果只提供一個百分數值,所提供的這個值將用作水平值,垂直值將假設為 50%。這一點與關鍵字類似。
background-position的默認值是 0% 0%,在功能上相當於 top left。這就解釋了背景圖像為什麼總是從元素內邊距區的左上角開始平鋪,除非您設置了不同的位置值。 長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。
比如,如果設置值為 50px 100px,圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }注意,這一點與百分數值不同,因為偏移只是從一個左上角到另一個左上角。也就是說,圖像的左上角與 background-position 聲明中的指定的點對齊。
⑥ 在html中,怎麼設置背景圖片不重復不平鋪,只顯示一張圖片
背景圖片不重復不平鋪,可以這樣設定背景:
1、<body style="background-image: url("圖片文件地址"); background-attachment: fixed;">
這樣背景圖片就會固定住,不會因頁面滾動而重復。
2、使圖在任何大小的屏幕都不會顯示重復,可以這樣設定背景(圖像不平鋪):
<body style="background-image: url("圖片文件地址"); background-repeat:no-repeat;">
3、兩者結合,就是:<body style="background-image: url("圖片文件地址"); background-repeat:no-repeat; background-attachment: fixed;">
(6)css讓背景圖片不重復擴展閱讀
超級文本標記語言文檔製作不是很復雜,但功能強大,支持不同數據格式的文件鑲入,這也是萬維網(WWW)盛行的原因之一,其主要特點如下:
簡易性:超級文本標記語言版本升級採用超集方式,從而更加靈活方便。
可擴展性:超級文本標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言採取子類元素的方式,為系統擴展帶來保證。
平台無關性:雖然個人計算機大行其道,但使用MAC等其他機器的大有人在,超級文本標記語言可以使用在廣泛的平台上,這也是萬維網(WWW)盛行的另一個原因。
通用性:另外,HTML是網路的通用語言,一種簡單、通用的全置標記語言。它允許網頁製作人建立文本與圖片相結合的復雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什麼類型的電腦或瀏覽器。
⑦ 怎樣使背景圖片不重復出現
html中的背景重復效果只有重復或者不重復,沒有重復幾次的,如果你想要實現重復兩次的效果,可以將圖片弄成是重復兩次的效果,然後在css設置為不重復,這樣的話就可以實現重復兩次的效果。
⑧ css如何控制背景圖片重復一部分,就是上半部分是圖片,下半部分是重復的地方,只控制在BODY內...
大概明白了你的意思,但是按你想的是基本不可能的,但是可以用給別的方法來代替。
首先,你把上半部分圖片(假設高100px)作為body裡面的內容,作為img標簽或者新建一個div的背景都可以,然後把下半部分圖片(假設叫bg.jpg)在body裡面這么設置
background:url(bg.jpg) repeat-x center 100px;}
⑨ 如何設置CSS網頁中的背景圖片不讓其重復並且鋪滿整個屏幕,不會因為解析度的問題而顯示不出來
background-repeat: no-repeat; /* 不平鋪 */
然後是鋪滿容器的問題,如果忽略IE內核的瀏覽器,用css3屬性background-size: 100%;輕松解決,要兼容的話可以設一個背景層放在容器的下方,背景層裡面放你的背景圖片,寬高設為跟容器一樣,然後把容器的背景設為透明即可。
⑩ css 背景圖片怎麼壓縮不重復平鋪
background-size:cover;
在css3的版本中新的屬性,能夠直接讓背景圖片鋪面