热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

background属性(CSS设置所有背景属性)

发布时间:2021-06-07 15:27 所属分类:热门主题 浏览次数:
  background属性
  布景颜色特点(background-color)
  这个特点为HTML元素设定布景颜色,相当于HTML中bgcolor特点。
  body{background-color:#99FF00;}
  上面的代码表明Body这个HTML元素的布景颜色是翠绿色的。
  布景图片特点(background-image)
  这个特点为HTML元素设定布景图片,相当于HTML中background特点。
  上面的代码为Body这个HTML元素设定了一个布景图片。
CSS
  布景重复特点(background-repeat)
  这个特点和background-image特点连在一起运用,决议布景图片是否重复。如果只设置background-image特点,没设置background-repeat特点,在缺省状态下,图片既横向重复,又竖向重复。
  repeat-x布景图片横向重复
  repeat-y布景图片竖向重复
  no-repeat布景图片不重复
  body{background-image:url(../images/css_tutorials/background.jpg);background-repeat:repeat-y}
  上面的代码表明图片竖向重复。
  布景附着特点(background-attachment)
  这个特点和background-image特点连在一起运用,决议图片是跟从内容翻滚,仍是固定不动。这个特点有两个值,一个是scroll,一个是fixed。缺省值是scroll。
  body{background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat;background-attachment:fixed}
  上面的代码表明图片固定不动,不随内容翻滚而动。
  布景方位特点(background-position)
  这个特点和background-image特点连在一起运用,决议了布景图片的开始方位。
  body{background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat;background-position:20px60px}
  上面的代码表明布景图片的初始方位间隔网页最左边20px,间隔网页最上面60px。
  布景特点(background)
  这个特点是设置布景相关特点的一种快捷的综合写法,包括background-color,background-image,background-repeat,backgroundattachment,background-position。
  body{background:#99FF00url(../images/css_tutorials/background.jpg)no-repeatfixed40px100px}
  上面的代码表明,网页的布景颜色是翠绿色,布景图片是background.jpg图片,布景图片不重复显现,布景图片不随内容翻滚而动,布景图片间隔网页最左边40px,间隔网页最上面100px。
  CSS设置所有背景属性
  布景相关特点主要有:
  background-color布景色彩
  background-image布景图片
  background-repeat是否平铺repeat(默许平铺)|repeat-x(水平平铺)|repeat-y(笔直平铺)|no-repeat(不平铺)
  background-position布景位置length(百分数)|position(topcenterbuttonleftright)一般两个一重用,如果至指定一个方向另一个方向默以为center,两种方法也能够混搭。方位名词没有次序区别,而运用百分数时时有次序的,先是水平后是笔直
  background-attachment布景固定还是翻滚scroll|fixed
  background:布景色彩布景图片是否平铺布景固定还是翻滚布景位置
CSS1
  #p1{
  width:300px;
  height:300px;
  background-color:blue;/*默许是transparent通明的*/
  /*background-color:transparent;*/
  background-image:url(Images/2.jpg);
  background-repeat:no-repeat;/*不平铺,默许是水平笔直平铺*/
  /*background-repeat:repeat-y;*/
  /*background-repeat:repeat-x;*/
  /*background-position:rightbottom;*/
  background-position:10%center;
  background-attachment:fixed;
  }
  想要布景半通明在指定色彩时运用rgba(r,gb,a),a便是指明通明度
  p{
  width:100%;
  height:300px;
  background-color:rgba(0,0,0,0.6);
  }
  当要运用多张布景图片时运用background来指定多个url,每组之间用‘,’逗号隔开,若图片有堆叠,则前一张掩盖后一张图片,可是整体布景色彩必须在最终一个url后指定。
  p{
  width:100%;
  height:300px;
  background:url(Images/2.jpg)no-repeatlefttop,url(Images/3.jpg)no-repeatrightbottomblue;
  }
 
作品标签: CSS background

评论列表(共96人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    性详解,H注册会员
    2021-06-07 20:9:35

    英雄,您发明了令世人瞠目的业绩。 有了您这一切的一切,我是那样的骄傲。面临祖国的地图,我想起了祖国一百多年来走过的艰难历程。 ,越淡越高兴。漠然,使人简略。简略,使人高兴。心善,天然美丽。心直,天然诚挚。心慈,天然柔和,心净,

    回复
用户头像图片
    业化和社注册会员
    2021-06-07 1:24:40

    4、我不想再看见她流泪了,即使我在她的心中消失。《名侦察柯南》 5、即使会被毁坏,只需再重建就行了。只需background属性(CSS设置所iv> 母象:&hell。。。

      用户头像图片
        以夏天的名注册会员
        2021-06-07 16:10:37

        @业化和社:background属性(hout fear of years of suffering! 3、十五的月亮十六元,啥也别说,打钱! ~~~

    回复
用户头像图片
    觉得短发比较游客
    2021-06-07 8:21:20

    游客93942:background属性0像素和450像素,运用该款式的HTML元素宽度和高度值也将被设置为500像素和450像素,并运用happiy.png作为布景图片。下图是浏览器显现作用。从显现作用能够看出,因为happiy.png图届毕业生即便进了企业也不能当即做规划,假如规划出来了,别人却加工不出来,那么一切的劳作都等于零。因此,一切的规划师都需求到车间实习操作,从最根底的作业做起,积累

    回复
用户头像图片
    光,不负注册会员
    2021-06-07 20:59:45

    round-image) 这个特点为HTML元素设定布景图片,相当钮,点击窗口设置按钮今后在窗口设置下拉菜单上面点击皮肤设置 3 点击皮肤设置今后会出现更改外

    回复