css怎麼做圖片開發_怎麼樣用CSS製作網頁背景圖片

❶ 用css在html中插入圖片怎麼做

<styletype="text/css">
#imgDiv{
background:url(https://gss0.bdstatic.com/70cFsj3f_gcX8t7mm9GUKT-xh_/ribao2014/2015year/1026/top.jpg);
width:400px;
height:300px;
overflow:hidden;
}
</style>
<divid="imgDiv"></div>

這段代碼你試試看，在div中完全沒有添加圖片標簽，而是根據css中的background屬性給div添加一張圖片作為背景。這樣做的好處是允許在同一個div中用hover來實現圖片的滑鼠響應切換，壞處就是無法調整圖片的大小。

❷ CSS+div怎麼做圖片中的導航條

css+div做圖片中的導航條的方法：

思路：對ul里的li設置排成一排所以需要設置一個CSS display:inline讓li排成一排，從而讓li並排布局。然後需要對ul li里的a標簽設置display:block的，但a父級li不設置具體寬度，所以需要對a設置display:inline-block讓其a隨li並排繼承同時對a設置寬度高度等樣式生效。

1、CSS代碼：

ul#nav{width:100%;height:60px;background:#00A2CA;margin:0auto}

ul#navli{display:inline;height:60px}

ul#navlia{display:inline-block;padding:020px;height:60px;line-height:60px;
color:#FFF;font-family:"5FAE8F6F96C59ED1";font-size:16px}

ul#navlia:hover{background:#0095BB}/*設置滑鼠滑過或懸停時變化的背景顏色*/

2、HTML代碼

<ulid="nav">

<li><ahref="http://www.xxx.com/html/">HTML教程</a></li>

<li><ahref="http://www.xxx.com/rumen/">CSS基礎</a></li>

<li><ahref="http://www.xxx.com/css-tool/">CSS開發工具</a></li>

<li><ahref="http://www.xxx.com/css-texiao/">CSS特效</a></li>

<li><ahref="http://www.xxx.com/wenji/">CSS問題</a></li>

</ul>

3、效果截圖

❸ 怎樣用css+div做圖片這樣

先做個大的div，然後裡面9個小的div，用相對位置絕對位置來控制9個小div的排列，大的div控制下大小

❹ 如何用css做出下面這張圖

這種還是希望題主自己寫一下的好，不過我下面寫了一份可以給題主參考，效果實現和你提供的圖片差不多，如下圖：

運行效果圖

代碼：

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

html,

body {

font-family: "楷體";

font-weight: bold;

}

.container {

width: 820px;

margin: 0 auto;

}

h1 {

text-align: center;

font-size: 32px;

}

.author {

text-align: right;

margin-right: 210px;

line-height: 100px;

}

.poem {

line-height: 50px;

margin-left: 50px;

}

.subTitle {

color: red;

line-height: 100px;

}

.text, .footer {

line-height: 30px;

}

.footer {

text-align: center;

}

</style>

</head>

<body>

<p class="poem">江南好，風景舊曾諳。<sup>(2)</sup>日出江花紅勝火，春來江水綠如藍。<sup>(3)</sup>能不憶江南？</p>

<hr />

<p class="text">&emsp;&emsp;白居易(72-84),學樂天,太原(今屬山西)人。唐德宗蝴進士,元和三年(808)拜左扮遺,後賴江州(今屬江西)司馬,移慮州(今屬四川)制史,又為蘇州(今屬江蘇)、岡州(今屬陝西大荔)制史。晚居洛陽,自號聯吵先生、香山居士,其謝歡治傾向鮮明,重漢喻,尚坦易,為中唐大家,也是平期詞人中的佼佼者,所作對後世影響甚大.</p>

<hr />

<p class="text">&emsp;&emsp;(1)據《樂府條錄》,此詞又名《謝秋旅》 ,系唐季德裕為亡短謝秋娘作,又名《望江角》、《夢江南》等,分單調、雙調兩體。半詞二十七字,雙凋五十四字,皆予韻.</p>

<p class="text">&emsp;&emsp;(3)藍:藍草,其葉可制青綠染科。</p>

<hr />

<p class="text">&emsp;&emsp;此詞寫江角春色,首句「江南好」,以一個既淺切又團活的「好"字,振盡江南春色的種種佳處,而作者的贊頃之意與嚮往之情也盡離其中,同時,唯國「好之已苦,方能"憶之不休,因此,此句又已路遇站句「輪不記江角",並與之相關國。次句「尺景舊曾語」,點明江由風景之「好,並非得之傳聞,而是作者出較杭州時的激身體驗與豪身感受,這就既落實了「好字,又照應了"花-字,不失為勾通一篇意脈的精彩老蛋。三、四兩句對江角之"好"進行形象化的漢繹,突出渡綠江吃、江水紅綠相缺的明艷色彩,給人以光彩奪目的強烈印象。其中,既有同色間的相互烘托,又有弄包間的相互映材,克分顯示了作者善予著色的技巧。末,以「能不記江南「救束金詞,既托出身在洛陽的作者對江南春色的無限贊嘆與懷念,又造成一種悠選而又深長的韻味,把讀者蒂入余請搖溪的境界中。</p>

<hr />

</div>

</body>

</html>

❺ css中怎樣引入背景圖片

css代碼添加背景圖片：

1．背景顏色：background-color

語法：{background-color:數值}

注意：在html當中，要為某個對象加上背景色只有一種辦法，那就是先做一個表格，在表格中設置完背景色，再把對象放進單元格。這樣做比較麻煩，不但代碼較多，還要為表格的大小和定位傷些腦筋。

表格背影顏色：style="background-color:red"

2．背景圖片：background-image

語法：{background-image: url(url)|none}

3．背景重復：background-repeat

語法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

作用：背景圖片重復控制的是背景圖片平鋪與否，也就是說，結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片。

說明：參數取值范圍：

·inherit 繼承

·no-repeat 不重復平鋪背景圖片

·repeat-x 使圖片只在水平方向上平鋪

·repeat-y 使圖片只在垂直方向上平鋪

注意：如果不指定背景圖片重復屬性，瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

4．背景固定：background-attachment

語法：{background-attachment:fixed|scroll}

·fixed：網頁滾動時，背景圖片相對於瀏覽器的窗口而言，固定不動

·scroll：網頁滾動時，背景圖片相對於瀏覽器的窗口而言，一起滾動

注意：背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時傷害瀏覽者的視力，所以可以解除背景圖片和文字內容的捆綁，該為和瀏覽器窗口捆綁。

5．背景定位：background-position

語法：{background-position:數值|top|bottom|left|right|center}

作用：背景定位用於控制背景圖片在網頁中顯示的位置。

·帶長度單位的數字參數

·top：相對前景對象頂對齊

·right：相對前景對象右對齊

·center：相對前景對象中心對齊

·比例關系

關鍵字解釋如下:

top left = left top = 0% 0%

top = top center = center top = 50% 0%

right top = top right = 100% 0%

left = left center = center left = 0% 50%

center = center center = 50% 50%

right = right center = center right = 100% 50%

bottom left = left bottom = 0% 100%

bottom = bottom center = center bottom = 50% 100%

bottom right = right bottom = 100% 100%

注意：參數中的center如果用於另外一個參數的前面，表示水平居中；如果用於另外一個參數的後面，表示垂直居中。

6. 背景樣式：background

語法：{background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

作用：背景屬性是一個更明確的背景—關系屬性的略寫。以下是一些背景的聲明。

(5)css怎麼做圖片開發擴展閱讀：

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

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

❻ 怎樣在css樣式的盒子里添加圖片啊就比如是這樣的

1、打開HBuilder開發軟體並在Web項目中創建一個新的靜態頁面。

❼ 請問一下各位大佬下面這個圖片用HTML和CSS該怎麼做

關鍵點有兩個，一是兩個圖片要重疊，二是把重疊上去的圖片繪製成三角形。

關於第二點需要用到clip-path屬性。它有很多用法，可以繪制多邊形，圓形，橢圓形和圓角。

關於clip-path的使用

polygon

值為多個坐標點組成，坐標第一個值是x方向，第二個值是y方向。

左上角為原點，右下角是(100%,100%)的點。

circle

值為一個坐標點和半徑組成。

左上角為原點，右下角是(100%,100%)的點。

定義半徑的時候可以用at關鍵字來定義坐標。

ellipse

值為橢圓的x軸半徑，y軸半徑，定位橢圓的坐標三部分組成。
左上角為原點，右下角是(100%,100%)的點。
at關鍵字將半徑和坐標分開。

inset

值為(上右下左 round 左上角radius 右上角radius 右下角radius 左下角radius)

round前面的數值，表示的是距離，如果第一個值為25%，則表示圖像在上面從25%開始繪制。

為什麼我要說這么多廢話，因為字數少了網路覺得答案不靠譜！！

以下為代碼：

請點採納！

❽ 怎麼樣用CSS製作網頁背景圖片

網頁的整體背景是在<head></head>之間定義的!
只要把此代碼放在<head><style
type="text/css">background:ulr(../images/tupian.gif)括弧里換成你自已的圖片地址.</style></head>之間即可.

css怎麼做圖片開發

與css怎麼做圖片開發相關的內容