导航:首页 > 图片大全 > css如何固定页面图片

css如何固定页面图片

发布时间：2022-04-21 12:47:04

① css用于控制网页的背景图片的属性正确的是

用css设置网页中的背景图片，主要有如下几个属性：
1，背景颜色 {">说明：参数取值和颜色属性一样注意：在HTML当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了，而且对象的范围很广，可以是一段文字，也可以只是一个单词或一个字母。例子：给部分文字加背景颜色给部分文字加背景颜色表格背影颜色：

代码示例:
style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">
2．背景图片：background-image

语法：{background-image: url(URL)|none}说明： URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径，将什么也不显示。例子：给部分文字加背景图片
代码示例:
.imgbgstyle { background-image: url(logo.gif)}
3．背景重复：background-repeat
语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片
说明：参数取值范围：
·inherit 继承·no-repeat 不重复平铺背景图片·repeat·repeat-x 使图片只在水平方向上平铺·repeat-y 使图片只在垂直方向上平铺
注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4．背景固定：background-attachment
语法：{background-attachment:fixed|scroll}说明：参数取值范围
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。
例子：使背景图案不随文字“滚动”的CSS
代码示例:
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5．背景定位：background-position
语法：{background-position:数值|top|bottom|left|right|center}作用：背景定位用于控制背景图片在网页中显示的位置。说明：参数取值范围
·带长度单位的数字参数·top：相对前景对象顶对齐·bottom：相对前景对象底对齐·left：相对前景对象左对齐·right：相对前景对象右对齐·center：相对前景对象中心对齐
·比例关系
关键字解释:top left = left top = 0% 0%

② css如何固定页面

.div{ width:100px; height:100px; position:fixed; top:100px; left:0;}使某个div固定漂浮

③ CSS 怎么固定图片位子

那是你的图片容器不固定的关系（把页面代码和CSS发上来）
====================
我晕，都用float:right;不动才怪：

#head_r_t {
FONT-SIZE: 13px; FLOAT: left; MARGIN: 8px 0px 0px; WIDTH: 734px; HEIGHT: 70px; TEXT-ALIGN: right;
}
#head_r_t A {
COLOR: #ffffff
}
#head_r_t_m {
FLOAT: right
}

改成float:left

④ 如何用css精确定位小图片的位置

如何用css精确定位小图片的位置

首先设置固定图片的css属性是background-attachment
background-attachment它有两个属性值fixed/scroll
background-attachment：fixed;表示固定图片，图片不随着页面滚动而滚动。
background-attachment：scroll；表示不固定图片，图片随着页面滚动而滚动
background-position这个属性用来定位图片的位置。
我们重点给大家分享background-position这个属性
2background-position;的语法结构，用水平和垂直位置进行定位。
background-position:x y;
其中，x有三个值：left(左)，center(中),right(右)。用来设置水平位置；
y也有三个值：top（上）,center(中)，bottom(下)。用来设置垂直位置；
两个属性值得中间一定要用英文的空格，隔开。
代码如下：
<style type="text/css">
<!--
#img{
background-image:url("图片存放路径"); /*插入背景图*/
background-repeat:no-repeat; /*设置图片不重复*/
background-color:#00ffff; /*设置背景颜色*/
background-position:left center; /*用居中对齐设置水平距离，用下面对齐设置垂直距离*/
width:400px; height:150px; /*设置宽度和高度*/
}
-->
</style>
<div id="img"></div>
3background-position:左边距离上边距离。这个用来找图片。
比如一张大图上面有很多小图，你只想用到其中一个小图就用这个找。
代码如下：
<html>
<head>
<style type="text/css">
#main{
{
background-image:url("图片存放路径"); /*插入背景图*/
background-repeat:no-repeat; /*设置图片不重复*/
background-color:#00ffff; /*设置背景颜色*/
background-position:60px 50px; /*设置水平距离和垂直距离*/
width:400px; height:200px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>

⑤ css 如何固定网页背景，并且自动适应浏览器大小！

1、 css不能控制背景图的大小, 有的屏幕是长方形的，有的还是正方形的了，你如果只控制它的宽，没准就会出现滚动条，你宽高都控制，它就变形了，所以说只能让大的浏览器显示的多一些，小的浏览器显示的少一点，样式代码如body {background:url("1.jpg") no-repeat center top fixed;}2、如果是在网页里面插入图片的话，可以控制图片的大小，控制它的宽，高估计就会出现滚动条，控制高，估计宽会出现滚动条，都控制，则变形，代码：
<body onload="auto_height()">
<script>
function auto_height()
{
var w= document.documentElement.clientWidth;
var high = document.getElementById("d2").getElementsByTagName("img")[0];
high.width=w;
}
</script>
<div id="d2"><img src="11.jpg" /></div>

</body>
综上所诉，你的要求是达不到的，建议你选第一个方法，我们做网站都是这么做的。

⑥ css中怎样设置图片固定

background-attachment 有2个值 { fixed //图片不随页面滚动
scroll;//图片会滚动这个是默认值
如果想测试效果请不要设置 no-repeat

⑦ css 如何固定网页背景，并且随浏览器的像素大小而变！

css3可以做到兼容ie9和市面上的多数非IE内核浏览器，它的

background-size可以设置2个值，1个为必填，1个为可选。

其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto（cover和contain特定值除外）。

div{

background-image:url(test.png);

background-repeat:no-repeat;

background-size:100px;

}

cover表示覆盖整个容器。你要背景全部那么需要注意的是html,body {height:100%}

当然以上内容不兼容低版本IE浏览器和不兼容css3规则的浏览器。

你说的背景整张显示，我之前项目遇到过这样的需求。我是直接用脚本写的。

实现思路是用图片绝对定位在网站最底层，z-index属性设置成负值。用脚本判断窗口大小，在每次窗口大小发生改变时监听事件捕获长宽，赋值给这张“地图”。

⑧ 想把一个图放在网页的固定位置上,应该用CSS的什么功能

嗯.可以设置图片的CSS属性
<style>

</style>
然后在HTML中把图片调用出来.要配合/更改上面相应的属性就OK了.

⑨ 如何用css设置网页背景固定不动

<styletype="text/css">
body
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>

如何只是设置不平铺，可能会让背景图片随着页面文字滚动，所以还是要对背景图片设置fixed固定。

⑩ 如何用css使一个用绝对定位的图片定位在网页一个具体位置,不随网页大小等改变位置!

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

阅读全文

与css如何固定页面图片相关的资料

热点内容

虎头像图片动漫男生发布：2025-02-01 01:40:26 浏览：525

四年级简单手工制作大全图片发布：2025-02-01 01:37:12 浏览：897

迷你小蛋糕图片大全集发布：2025-02-01 01:27:27 浏览：681

word调整图片变形发布：2025-02-01 01:24:51 浏览：815

word插入的图片怎么调色发布：2025-02-01 01:20:05 浏览：860

如何制作撕裂图片发布：2025-02-01 01:12:36 浏览：450

桥梁图片怎么画发布：2025-02-01 01:11:19 浏览：465

秀米一个模板如何添加多个图片发布：2025-02-01 01:03:06 浏览：292

法式白色衣服图片发布：2025-02-01 00:54:50 浏览：721

古奇双肩包价格及图片发布：2025-02-01 00:48:03 浏览：531

山河动画图片高清发布：2025-02-01 00:48:03 浏览：818

word设置导出图片分辨率300ppi 发布：2025-02-01 00:34:39 浏览：787

女生单手扶墙提鞋漫画图片紫色发布：2025-02-01 00:29:50 浏览：619

新娘简单美甲图片大全发布：2025-02-01 00:29:37 浏览：113

帅气背影动漫图片发布：2025-02-01 00:22:59 浏览：337

友情客串文字图片发布：2025-02-01 00:15:46 浏览：591

写意画图片简单发布：2025-02-01 00:12:09 浏览：327

帅气搭配图片男生发布：2025-02-01 00:02:54 浏览：486

树的速写简单图片大全发布：2025-01-31 23:54:24 浏览：277

搜索简单的马搜索索出来的图片发布：2025-01-31 23:49:34 浏览：833