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怎么做图片开发相关的内容