當前位置:首頁 » 背景圖片 » css背景圖片大小改不了
擴展閱讀
令人討厭的圖片素材 2025-01-25 02:34:46
夢幻仙境圖片大全 2025-01-25 02:22:34

css背景圖片大小改不了

發布時間: 2023-09-09 23:33:37

A. css中的背景圖怎麼改變大小

需要准備的材料分別有:電腦、瀏覽器、html編輯器。

1、首先,打開html編輯器,新建html文件,例如:index.html。

B. css問題:如何控制背景圖片的大小

1、css2中是無法控制背景圖片大小的,如果想實現這種效果,只能是更改圖片了。
2、css3中可以通過background-size來控制圖片的大小。
background-size屬性用法:
background-size:
length|percentage|cover|contain;
1)length:設置背景圖像的高度和寬度。第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為
"auto"。
2)以父元素的百分比來設置背景圖像的寬度和高度。
3)把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
4)把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。
具體示例可以參考:http://www.w3school.com.cn/cssref/pr_background-size.asp

C. CSS中背景圖片的大小

對的,當以<img src="" />形式出現的時候可以有幾種種方法實現;
而當採用backgroud形式作為背景的時候,只能通過改變原圖了,不過當背景是有規律的漸變色、紋路、圖案等時候,可以把圖片切小後通過平鋪的方式鋪滿!

D. css中如何調整插入背景圖片的大小

一、HTML標簽內控制寬度高度

Img標簽教程:

1、我們在HTML布局時候直接在圖片img標簽加寬度和高度屬性即可控制圖片高和寬;

2、我們可以直接在圖片標簽設置寬度width和高度height,這里需要注意的是HTML img標簽內直接設置寬度和高度值不需要html單位,默認為PX像素;

3、img標簽內設置高度寬度優點直觀,對於文章內插入圖片可以利用此方法控制設置圖片高度寬度;缺點,如果圖片列表排版的這樣會增加很多HTML代碼,不便統一修改。

二、CSS樣式控制width、height

語法:img{width:150px;height:60px}

這里設置CSS寬度為150px,css高度為60px,注意是CSS樣式中css width和css height的值都帶單位也要記住一定帶上單位,這里和HTML img標簽內設置高度寬度不帶單位一定區別大家一定注意並記住此知識點。

如果是我們直接對img設置樣式,這樣會將整個網頁中圖片寬度高度控制了。為了控制指定對象內的圖片寬度高度樣式,我們通常在img前加上對象CSS命名。

假如我們要控制.divcss5內圖片樣式,那我們語法如下:

.divcss5img{width:150px;height:60px}

解釋語法結構:對象選擇器命名加一個空格然後輸入img接著「{...}」構成控制指定對象內圖片樣式。

三、CSS設置IMG圖片寬度和高度實例

1、CSS設置圖片實例描述

我們在一個HTML中放圖片,1張為原始大小圖片,1張為通過CSS設置寬度和高度圖片,通過2張圖片對比分析通過CSS改變圖片大小。

2、實例完整HTML+CSS代碼如下:

<!DOCTYPEhtml>

<html>

<head><metacharset="utf-8"/>

<title>css控制圖片大小在線示www.divcss5.com</title>

<style>.divcss5img{width:300px;height:100px}</style>

</head>

<body>

<p><strong>原始圖片大小</strong></p>

<p><imgsrc="divcss5-logo-201305.gif"><br>本身這個圖片寬度為165px高度60px</p>

<p><strong>通過CSS改變設置圖片大小</strong></p>

<divclass="divcss5"><imgsrc="divcss5-logo-201305.gif"><br>這里設置divcss5盒子里圖片寬度300px高度100px</div>

</body>

</html>

兩處使用圖片為同一張圖片,以便觀察效果。

3、圖片大小設置實例截圖

從上圖我們能看出CSS改變IMG圖片大小,從而讓圖片比原始的大。

(4)css背景圖片大小改不了擴展閱讀:

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標准通用標記語言的一個應用)或XML(標准通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。

E. css中如何調整插入背景圖片的大小

body{background:"#FF0000 url( http://www.zhoz.com/zhoz_com_2008bg.png) no-repeat fixed center top";}HTML DOM background 屬性:是用於在一個聲明中設置所有背景屬性的一個簡寫屬性。語法:Object.style.background=background-color background-imagebackground-repeat background-attachment background-position參數 描述 值 background-color 設置元素的背景色。 color-name color-rgb color-hex transparent background-image 設置背景圖像。 url(URL) none background-repeat 設置背景圖像是否及如何重復。 repeat repeat-x repeat-y no-repeat background-attachment 背景圖像是否固定或者隨著頁面的其餘部分滾動。 scroll fixed background-position 設置背景圖像的起始位置。 top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

F. 關於html中背景圖片的問題。。。用<body background=...>或者用css中 body{}加入的圖片怎麼調節大小

背景圖片實現不了縮放,是多大就是多大,只可以設置背景圖片的位置,和重復等屬性,沒有縮放屬性,背景圖片大於容器,容器只會截取某部分,小了則根據你的定義重復顯示,或者不重復,補背景顏色等

G. css中如何調整插入背景圖片的大小

可以通過cover和contain來對圖片進行伸縮。

語法:

background-size:auto;/* 默認值,不改變背景圖片的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬,第二個值為高,當設置一個值時,將其作為圖片寬度來等比縮放 */

background-size:10%;/* 0%~100%之間的任何值,將背景圖片寬高按百分比顯示,當設置一個值的時候同也將其作為圖片寬度來等比縮放 */

background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */

background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

(7)css背景圖片大小改不了擴展閱讀:

CSS背景圖片自適應、全屏、填充、拉伸

方法一:js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二:全瀏覽器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

H. css中的背景圖怎麼改變大小

在css中控制插入背景圖片的大小用background-size

background-size使用語法有下面四種情況

background-size: length|percentage|cover|contain

length用法:

background-size:100px; //背景圖片顯示的寬和高為100像素

background-size:100px 160px;//背景圖片顯示的寬為100像素,高為600像素

percentage用法:

background-size:60%; //背景圖片的顯示寬度和高度是圖片大小60%;

background-size:60% 80%; // 背景圖片的顯示寬度是圖片大小的60%,高度是80%;

cover用法:

background-size:cover; //把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

contain用法:

background-size:contain; //把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。

(8)css背景圖片大小改不了擴展閱讀

background-size屬性瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

參考資料

網路——background(計算機專業術語)

I. CSS樣式表控制背景圖片大小

可以通過background-size屬性來設定背景圖片的大小。它可以是像素(px)或者是百分比(%),舉例說明:background-size:950px* 200px這表示把背景圖片大小調整為寬度950像素,高度200像素。

1、background-size的語法說明:

(1)屬性名:background-size

(2)屬性值:其中 bg-size = [|| auto ]{1,2} | cover |
contain

(3)初始值:auto auto

(4)應用於:所有元素

(5)繼承性:無

(6)百分比:後面會說明

(7)計算值:根據指定

2、代碼說明:

/* 一個值: 這個值指定圖片寬度,第二個值為auto */

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px

/* 兩個值: 第一個值指定圖片的寬度,第二個值指定圖片的高度 */

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

/*多重背景,用逗號隔開,在CSS語法中凡語法後跟*或者#,都是可以無限重復的,但必須用逗號隔開。 */

background-size: auto, auto /* 請區別於background-size: auto auto*/

background-size: 50%, 25%, 25%

background-size: 6px, auto, contain

background-size: inherit

(9)css背景圖片大小改不了擴展閱讀:

背景重復:

如果需要在頁面上對背景圖像進行平鋪,可以使用background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復,no-repeat 則不允許圖像在任何方向上平鋪。

背景圖像將從一個元素的左上角開始。如下:

body
{
background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y;
}

背景定位:

可以利用background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個背景圖像居中放置:

body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:center;
}

為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或 5cm,最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。