css背景图片相关样式,css背景图片相关样式怎么设置

css插入背景图片的样式

背景图如果位置是0,0 就相当于背景图以左上角为原始位置贴上去。

但是如果我要这个背景图的下方的比如QQ作为背景图，那么这个背景图就要往上移，看上去大概在35个像素左右。

往上移了就相当于这张图离原始位置偏移了-35px，左右没偏移，所以新位置是(-35 0)

这个数值，要看这张背景图的组合，看这个需要的图标，距离顶端的位置有多大，背景图距上位置就负的多大。 同理向左向右。

背景 图片显示CSS样式集合+注释

这是我用的图片样式参考，你可以在有用的地方用。

/*-==背景图片样式==-*/

/* 平铺 */

.uxjy_ltth_jofi1{background-position:left top;}/* 左上 */

.uxjy_ltth_jofi2{background-position:left;}/* 左中 */

.uxjy_ltth_jofi3{background-position:left bottom;}/* 左下 */

.uxjy_ltth_jofi4{background-position:center top;}/* 中上 */

.uxjy_ltth_jofi5{background-position:center;}/* 中中 */

.uxjy_ltth_jofi6{background-position:center bottom;}/* 中下 */

.uxjy_ltth_jofi7{background-position:right top;}/* 右上 */

.uxjy_ltth_jofi8{background-position:right;}/* 右中 */

.uxjy_ltth_jofi9{background-position:right bottom;}/* 右下 */

/* 横向平铺 */

.uxjy_ltth_jofi_x1{background-repeat: repeat-x; background-position:left top;}/* 横向左上 */

.uxjy_ltth_jofi_x2{background-repeat: repeat-x; background-position:left;}/* 横向左中 */

.uxjy_ltth_jofi_x3{background-repeat: repeat-x; background-position:left bottom;}/* 横向左下 */

.uxjy_ltth_jofi_x4{background-repeat: repeat-x; background-position:center top;}/* 横向中上 */

.uxjy_ltth_jofi_x5{background-repeat: repeat-x; background-position:center;}/* 横向中中 */

.uxjy_ltth_jofi_x6{background-repeat: repeat-x; background-position:center bottom;}/* 横向中下 */

.uxjy_ltth_jofi_x7{background-repeat: repeat-x; background-position:right top;}/* 横向右上 */

.uxjy_ltth_jofi_x8{background-repeat: repeat-x; background-position:right;}/* 横向右中 */

.uxjy_ltth_jofi_x9{background-repeat: repeat-x; background-position:right bottom;}/* 横向右下 */

/* 纵向平铺 */

.uxjy_ltth_jofi_y1{background-repeat: repeat-y; background-position:left top;}/* 纵向左上 */

.uxjy_ltth_jofi_y2{background-repeat: repeat-y; background-position:center top;}/* 纵向中上 */

.uxjy_ltth_jofi_y3{background-repeat: repeat-y; background-position:right top;}/* 纵向右上 */

.uxjy_ltth_jofi_y4{background-repeat: repeat-y; background-position:left;}/* 纵向左中 */

.uxjy_ltth_jofi_y5{background-repeat: repeat-y; background-position:center;}/* 纵向中中 */

.uxjy_ltth_jofi_y6{background-repeat: repeat-y; background-position:right;}/* 纵向右下 */

.uxjy_ltth_jofi_y7{background-repeat: repeat-y; background-position:left bottom;}/* 纵向左下 */

.uxjy_ltth_jofi_y8{background-repeat: repeat-y; background-position:center bottom;}/* 纵向中下 */

.uxjy_ltth_jofi_y9{background-repeat: repeat-y; background-position:right bottom;}/* 纵向右下 */

/* 单一 */

.uxjy_ltth_jofi_h1{background-repeat: no-repeat; background-position:left top;}/* 单图上左 */

.uxjy_ltth_jofi_h2{background-repeat: no-repeat; background-position:center top;}/* 单图上中 */

.uxjy_ltth_jofi_h3{background-repeat: no-repeat; background-position:right top;}/* 单图上右 */

.uxjy_ltth_jofi_k1{background-repeat: no-repeat; background-position:left;}/* 单图中左 */

.uxjy_ltth_jofi_k2{background-repeat: no-repeat; background-position:center;}/* 单图中中 */

.uxjy_ltth_jofi_k3{background-repeat: no-repeat; background-position:right;}/* 单图中右 */

.uxjy_ltth_jofi_g1{background-repeat: no-repeat; background-position:left bottom;}/* 单图下左 */

.uxjy_ltth_jofi_g2{background-repeat: no-repeat; background-position:center bottom;}/* 单图下中 */

.uxjy_ltth_jofi_g3{background-repeat: no-repeat; background-position:right bottom;}/* 单图下右 */

/*----====----*/

css背景图片代码

1、首先在电脑端找到Dw软件，进行打开操作，然后新建一个html文件。

2、新建文件完成之后，写入一个div代码操作，如图所示。

3、写入div代码之后，引入一个css样式，如图代码操作所示。

4、引入样式代码之后，打开引入的css.文件，如图所示。

5、在新引入的css文件中，写入css背景图片代码即可，如图所示。

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

扩展资料：

背景重复：

如果需要在页面上对背景图像进行平铺，可以使用 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，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

参考资料来源：w3school：CSS 背景

CSS如何添加背景图片

通过css：background-image语句设置背景。

background-image 属性会在元素的背景中设置一个图像。根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。初始背景图像（原图像）根据 background-position 属性的值放置。

（1）相对的文件位置：

（2）测试代码：

测试效果：

扩展资料：

background-image 属性为元素元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

参考资料：百度百科--CSS background-image

CSS3样式中如何让背景渐变与背景图片共存？

目前，对CSS3支持日趋完善，实现兼容性的渐变背景效果是完全可以的，让背景渐变与背景图片共存的方法很简单，主要要注意的是图片要 保持“最小单元”的准则，选择正确的浏览器，该问题就能得到解决，下面介绍一下具体的解决方法。

1、图片渐变切图时一定要以最小为准则，例如在做垂直方向的纯颜色的渐变时，尝试使用1个像素的竖直图片作为渐变背景“最小单元”。另外，要注意css3虽然支持很多的浏览器的兼容，但是目前不支持Opera浏览器。

2、如果兼容程度允许的话，纯色渐变背景可以使用css3的渐变样式，如{background: linear-gradient(left top, red , blue);}，如此一来能够减少切图量，还可以加快网页加载速度，缺点是使用主流浏览器的话，就必须要添加前缀。

3、注意对于webkit核心的浏览器，如Chrome/Safari浏览器，在这些浏览器下要做到渐变背景，也需要使用CSS3 渐变方法，css-gradient，具体就是-webkit-gradient，使用语Firefox浏览器业是有一点差异的。