bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS3中背景圖片位置background-position怎么用

小編給大家分享一下CSS3中背景圖片位置background-position怎么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創新互聯自成立以來，一直致力于為企業提供從網站策劃、網站設計、網站設計、成都網站建設、電子商務、網站推廣、網站優化到為企業提供個性化軟件開發等基于互聯網的全面整合營銷服務。公司擁有豐富的網站建設和互聯網應用系統開發管理經驗、成熟的應用系統解決方案、優秀的網站開發工程師團隊及專業的網站設計師團隊。

在css3之前設置background-position，你可以從元素的左上角設置位置。

例如：

div{background-position:20px 40px;/*20px from left & 20px from top*/}

問題是無法從另一個點確定確切的位置，例如從底部/右邊，我們只能從左上角開始。

我們可以寫：background-position：right bottom;也可以寫：background position:70%/從left開始/ 80%/從top開始/;,

但是我們不能從右邊寫20px而從底部寫20px。

我們來看看新的background-position屬性

為了解決這個問題，CSS3為我們提供了確定從何處開始定位以及確定0,0點的選項。

我們怎么實現呢？

我們現在可以用css3寫下水平和垂直位置的開頭，如右下角+起點的值，而不是只寫2個值（左上角的水平和垂直點）。

讓我們創建一個例子：

首先創建一個帶有一些樣式的空div：

HTML：

<div class="box">
</div>

CSS

.box{   
  width:300px;
  height:300px;
  background-color:#ddd;
  padding:10px;
  border:solid 3px #333;
  border-radius:10px;
}

現在我們將添加一個固定背景大小的背景圖像（CSS3中的新功能）。

.box{   
    background:url(image/cup.jpg) no-repeat;
    background-size:150px 150px;
}

最后我們將添加新背景位置。

首先我們設置水平起點，例如：右邊和之后我們可以設置我們想要的距離，例如20px。
其次，我們設置垂直開始起點，例如：底部后，我們設定的距離，我們從該位置需要，例如40像素。

CSS新背景位置

.box{ background-position :right 20px bottom 40px;}

效果如下：

CSS3中背景圖片位置background-position怎么用

我們是實現了這個效果，除此之外，我們還可以實現一個包含多個背景圖像的框，代碼如下；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{
  background-position:
    left 0 top 0,
    right 0 top 0,
    bottom 0 right 0;
  background-image:url(image/flower.jpg),  url(image/flowers.jpg),  url(image/greatwall.jpg);
  
  background-repeat:no-repeat;

  background-size:200px 200px;
  
  width:500px;
  height:500px;
  background-color:#ddd;
  padding:10px;
  border:solid 3px #333;
  border-radius:10px;
}
</style>
</head>
<body>
<div class="box">
</div>   
</body>
</html>

效果如下：

CSS3中背景圖片位置background-position怎么用

看完了這篇文章，相信你對CSS3中背景圖片位置background-position怎么用有了一定的了解，想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

本文名稱：CSS3中背景圖片位置background-position怎么用
鏈接分享：http://vcdvsql.cn/article38/jhjssp.html

成都網站建設公司_創新互聯，為您提供網站設計公司、響應式網站、做網站、云服務器、企業建站、定制開發

廣告

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

營銷型網站建設