1. 程式人生 > >CSS中背景圖片位置屬性background-position

CSS中背景圖片位置屬性background-position

    該屬性用來定義元素背景圖片的起始位置,在背景圖片的背景圖片位置屬性中,可以使用兩種屬性值,一種為長度單位,包括長度值

和百分比值;另一種為指定值,包括top, center, bottom, left, righ等,其語法結構如下:

    background-position: length | percent | top | center | bottom | left | right

   其中部分屬性值的含義如下所述:

     top: 背景圖片的初始位置為元素頂部

     center: 背景圖片的起始位置為元素中部

     left: 背景圖片的起始位置為元素左側

     right: 背景圖片的起始位置為元素右側

    bottom: 背景圖片的起始位置為元素底部

  在背景圖片位置屬性中,屬性值一般有2個,前一個代表橫向位置,後一個代表縱向位置,使用兩個屬性值定義背景圖片的起始位置,

如果兩個方向的起始位置相同,則可以使用一個值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    div {
	  background-position: center top;
	  background-repeat: repeat-y;
	  background-image: url(images/round.jpg);
	  width: 400px;
	  height: 100px;
	}
  </style>
 </head>
 <body>
    <div>這是背景圖片位置屬性的例項</div>
 </body>
</html>
  在以上程式碼中,定義了背景圖片的位置為中間、頂部,同時定義了背景圖片為縱向重複。

相關推薦

CSS背景圖片位置屬性background-position

    該屬性用來定義元素背景圖片的起始位置,在背景圖片的背景圖片位置屬性中,可以使用兩種屬性值,一種為長度單位,包括長度值 和百分比值;另一種為指定值,包括top, center, bottom, left, righ等,其語法結構如下:     background-p

css背景圖片位置backgroundposition(轉)

osi ack post 前景 相對 right 並且 back top position的兩個參數:水平方向的位置,垂直方向的位置----------該位置是指背景圖片相對於前景對象的1.background:url(../image/header.jpg) n

css控制背景圖片位置-background-position

最近經常給div在加背景圖片的時候,發現背景圖片的位置總是跟自己想要的效果不一樣,所以就粗略的研究了一下,把結果和過程跟大家一起分享一下。現在就用div來舉例子,其他的容器也都一樣。主要來介紹一下背景background的幾個屬性。我們給一個div加上背景後,先僅僅控制背景

Html+Css CSS背景圖片定位方法

CSS中背景圖片的定位,困擾我很久了。今天總算搞懂了,一定要記下來。 在CSS中,背景圖片的定位方法有3種:   1)關鍵字:background-position: top left;   2)畫素:background-position: 0px 0px;

CSS Sprites(CSS雪碧圖)利用background-position從大圖扣出小圖

CSS Sprites技術被國內一些人稱為CSS雪碧圖,其實就是把網頁中一些背景圖片整合到一張圖片檔案中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,backg

網頁設計利用CSS實現背景圖片平鋪的技巧

我們在進行網站的設計製作過程中,使用css來針對背景圖片進行設定,其實就與傳統的做法一樣十分簡單方便。不過,相對於傳統的一些操作方式,css可以提供更多的可控選項,我們先了解一下一引起最基本的設定圖片的方法。  css程式碼如下:  #content { border:1

CSS網頁背景圖片等比例占滿整個頁面的解決方案

100% 放大縮小 所有 功能 cnblogs 高度 圖片 版本 class 想做一個個人展示類的網站首頁,用整張圖片來當背景,瀏覽器窗口放大縮小時背景圖片不會變形,需要用到分層來實現其他功能,就用DIV來實現了 #bodycontainer { width:10

js+css背景圖片動起來

margin mage fun width col type images doc anim <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

背景圖片位置設置為百分比

宋體 font 百分數 pan 很好 位置 容器 style 效果 background-position:50% 50%;水平和垂直方向都居中。 background-position:value1 value2 value1和value2的值可以值絕對值也可以是百分數,

css常見的 cursor 屬性(轉自http://www.w3school.com)

指針 mov ssh 右移 tab body poi ossh idt 值描述 url 需使用的自定義光標的 URL。 註釋:請在此列表的末端始終定義一種普通的光標,以防沒有由 URL 定義的可用光標。 default 默認光標(通常是一個箭頭) auto

css插入圖片時的相對路徑和絕對路徑

在CSS檔案裡,有時要用到background,即加一個背景圖片,新增的路徑根據圖片及css檔案的相對位置分以下兩種型別: 1.同包下:background : url(xxx.jpg); 2.不同包: 在這種情況下有2中方法可以設定,一種是使用絕對路徑,即C:\Users\dellpc

利用css背景圖片鋪滿整個螢幕

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; c

css字型與段落屬性設定/文字高階樣式

CSS中字型與段落屬性 毫無疑問,不管什麼網站,文字一定是必不可少。文字可以是網頁傳播資訊的主要手段。那麼怎麼顯示文字,才能更加的美觀,那麼大家需要了解以下文字屬性。   字型屬性 屬性 用途 語法(一些寫法)

CSS實現背景圖片透明而文字不透明效果的方法

1.毛玻璃效果: 背景圖 + 偽類 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:befor

HTML直接插入圖片css使用背景圖片區別

本文轉載自:http://www.bangju.com/design_50.html 感謝分享 剛剛接觸前端重構的小夥伴或許會遇到一個問題,網頁中的圖片是做背景(寫在CSS中)好呢,還是寫在HTML標籤中好呢?其實呢不同的場景、不同的專案需求下,選擇都會不一樣。我們先來分析一下網友的一些

第5章 css背景相關的樣式background

background-origin 設定元素背景圖片的原始起始位置。 語法: background-origin : border-box | padding-box | content-box; 引數分別表示背景圖片是從邊框,還是內邊距(預設值),或者是內容區域開始顯示。 效果如下: 需要注意的是

(8/24) 圖片跳坑大戰--css圖片處理

web 參數 拷貝 ons document ide 前言 inf spa 前言:此節的開展是在上一節的基礎上進行的,(每一節都是從無到有編寫關於此節的知識),最後會附上相關完整代碼。上一節 CSS中的圖片處理 1.新建images文件夾 在src目錄下新建一個ima

CSS的pointer-events屬性實現點穿效果

CSS的pointer-events屬性 auto:與 pointer-events 屬性未指定時的表現效果相同。 none:該元素永遠不會成為滑鼠事件的 target。但是,當其後代元素的 pointer-events 屬性指定其他值時,滑鼠事件可以指向後代元素,在這種情況下,滑

HTML5、CSS字型的各類屬性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p{ /*前面是

css背景圖片和插入圖片的區別以及精靈圖的使用

一,背景圖片和插入圖片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-css背景