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

阿新 • • 發佈：2019-01-14

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

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

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

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背景

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

相關推薦