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背景圖片位置:background的position(轉)
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背景