欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css設(shè)置背景圖片的方法

這篇文章將為大家詳細(xì)講解有關(guān)css設(shè)置背景圖片的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、青神ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的青神網(wǎng)站制作公司

css background屬性就是專門設(shè)置背景的屬性，可以設(shè)置背景色，也可以設(shè)置背景圖片。

下面看看background可以設(shè)置的屬性：

  • background-color： 規(guī)定要使用的背景顏色。

  • background-position： 規(guī)定背景圖像的位置。

  • background-size： 規(guī)定背景圖片的尺寸。

  • background-repeat ：規(guī)定如何重復(fù)背景圖像。

  • background-origin ：規(guī)定背景圖片的定位區(qū)域。

  • background-clip： 規(guī)定背景的繪制區(qū)域。

  • background-attachment： 規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。

  • background-image ：規(guī)定要使用的背景圖像。

可以看出background-image屬性就是給html頁面設(shè)置背景圖片的屬性，下面看看它的用法

background-image:url(1.jpg);

這樣在url()里給出圖片的路徑，就可以給div盒子設(shè)置一個(gè)背景圖片；看似簡單，但有一點(diǎn)要注意，設(shè)置背景圖片的盒子必須要有實(shí)質(zhì)的寬度與高度，這樣才可以讓背景圖片在顯示屏上顯示。

上面的這些background屬性如果一個(gè)一個(gè)的設(shè)置是不是感到繁瑣，其實(shí)有些屬性是可以放在一起設(shè)置的，這樣的css背景表達(dá)可以節(jié)約且優(yōu)化了css文件代碼。例：

background:url(bgimg.gif) no-repeat 5px 5px;

如下圖解釋：

css設(shè)置背景圖片的方法

css設(shè)置背景圖片的代碼實(shí)例

1.css設(shè)置背景圖片自適應(yīng)全屏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景圖片設(shè)置</title>
		<style>
			.demo{
				position:fixed;
				top: 0;
				left: 0;
				width:100%;
				height:100%;
				min-width: 1000px;
				z-index:-10;
				zoom: 1;
				background-color: #fff;
				background: url(2.png);
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-background-size: cover;
				-o-background-size: cover;
				background-position: center 0;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

效果圖：

css設(shè)置背景圖片的方法

下面具體分析一下css樣式的作用：

position:fixed;  
top: 0;  
left: 0;

這三句是讓整個(gè)div.demo盒子固定在屏幕的最上方和最左方。

width:100%;  
height:100%;

這是讓整個(gè)div跟屏幕實(shí)現(xiàn)一模一樣的大小，從而達(dá)到全屏效果。

min-width: 1000px;

min-width是為了實(shí)現(xiàn)讓屏幕寬度在1000px以內(nèi)時(shí)，div的大小保持不變，也就是說在這種情況下，縮放屏幕寬度時(shí)，圖片不要縮放（只有在1000px以內(nèi)才有效）。

  z-index:-10;

這個(gè)是讓整個(gè)div在HTML頁面中處在各個(gè)層級(jí)的下方，正常情況下，第一個(gè)創(chuàng)建的層級(jí)z-index的值是0，所以如果我們這里寫成-1也可以實(shí)現(xiàn)，不過這里寫-10是確保整個(gè)div在最下面，因?yàn)槿绻撁嬷袑蛹?jí)太多了，有的時(shí)候用-1不一定在最下面，但如果寫成-100這樣大數(shù)字的也沒有什么意義。用index:-10 以此能達(dá)到看上去像背景圖片，其實(shí)是一個(gè)最普通的div，只是層級(jí)關(guān)系變了，才讓人看上去看是背景圖片。

 background-repeat: no-repeat;

這個(gè)css樣式是設(shè)置背景圖片不要重復(fù)的；例子中的是一張大圖，如果是一張純色（或伴有點(diǎn)狀/條紋狀）的圖片，可以讓圖片平鋪（重復(fù)）到整個(gè)屏幕上，達(dá)到全屏效果。（repeat-x是設(shè)置橫向平鋪、repeat-y是設(shè)置豎向平鋪）

2.css設(shè)置背景圖片透明

原圖：

css設(shè)置背景圖片的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景圖片設(shè)置</title>
		<style>
			.demo{
				width: 600px;
				height: 200px;
				background:url(1.jpg) no-repeat;
				
			}
			.demo1{
				width: 100%;
				height: 100%;
				background-color: rgba(255,255,255,0.5);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
		</div>
	</body>
</html>

效果圖：

css設(shè)置背景圖片的方法

原理：在背景圖片上重疊上一層白色透明的div盒子

此方法的瀏覽器兼容性好，而且可以做透明的div盒子里添加文字，實(shí)現(xiàn)圖片透明但文字不透明的效果。

關(guān)于css設(shè)置背景圖片的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前文章：css設(shè)置背景圖片的方法
當(dāng)前鏈接：http://chinadenli.net/article16/goppgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站收錄、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站