① 用一句css代码能够同时设置背景颜色、背景图片、背景图片是否重复、背景图片位置
可以的。
可以用background属性设置这些css样式。如:"background: #0f0 url('images/bg.png') no-repeat 0 center;"。
② 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 怎么设置背景图片的重复次数
CSS中是不能设置背景图片的重复次数,不过可以做出重复次数的效果。
例如,你的一张图片如果是X轴重复3次,宽为100px;那么你就可以写
img{background:url(图片地址)repeat-x;height:50px;width:300px;}
这样子就可以了。
CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
④ 如何让网页背景图片不重复显示
现在一般都用css设定了,比如在一个div下设背景图片切不让其重复,则可设一个样式,比如:
.nobgrepeat{background:url(背景图片地址) left top no-repeat;}
(这个样式可以直接放在网页文件head标签对的<style></style>标签对中,然后在调用时直接用<div class="nobgrepeat"></div>,也可以另外放在单独的css文件中)
left:直接用left代表背景图片靠到div最左边,可以用数字代替,比如10px,来控制背景图片距离该div左边的距离。
top:同left
另外取值还有:right;bottom;center看你自己如何取了。
repeat的取值还有repeat-x,repeat-y,分别表示沿x轴重复和y轴重复。
background还有个fixed属性,我没用过,你可以自己用用看看
⑤ 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,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }下面是等价的位置关键字: 单一关键字 等价的关键字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left 百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; }如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。 长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
⑥ 在html中,怎么设置背景图片不重复不平铺,只显示一张图片
背景图片不重复不平铺,可以这样设定背景:
1、<body style="background-image: url("图片文件地址"); background-attachment: fixed;">
这样背景图片就会固定住,不会因页面滚动而重复。
2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺):
<body style="background-image: url("图片文件地址"); background-repeat:no-repeat;">
3、两者结合,就是:<body style="background-image: url("图片文件地址"); background-repeat:no-repeat; background-attachment: fixed;">
(6)css让背景图片不重复扩展阅读
超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:
简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
⑦ 怎样使背景图片不重复出现
html中的背景重复效果只有重复或者不重复,没有重复几次的,如果你想要实现重复两次的效果,可以将图片弄成是重复两次的效果,然后在css设置为不重复,这样的话就可以实现重复两次的效果。
⑧ css如何控制背景图片重复一部分,就是上半部分是图片,下半部分是重复的地方,只控制在BODY内...
大概明白了你的意思,但是按你想的是基本不可能的,但是可以用给别的方法来代替。
首先,你把上半部分图片(假设高100px)作为body里面的内容,作为img标签或者新建一个div的背景都可以,然后把下半部分图片(假设叫bg.jpg)在body里面这么设置
background:url(bg.jpg) repeat-x center 100px;}
⑨ 如何设置CSS网页中的背景图片不让其重复并且铺满整个屏幕,不会因为分辨率的问题而显示不出来
background-repeat: no-repeat; /* 不平铺 */
然后是铺满容器的问题,如果忽略IE内核的浏览器,用css3属性background-size: 100%;轻松解决,要兼容的话可以设一个背景层放在容器的下方,背景层里面放你的背景图片,宽高设为跟容器一样,然后把容器的背景设为透明即可。
⑩ css 背景图片怎么压缩不重复平铺
background-size:cover;
在css3的版本中新的属性,能够直接让背景图片铺面