给网页添加一个不错的背景?

发布于 2018-11-17  641 次阅读


很简单,只需要在你的网站代码里面加入以下代码即可实现,

  1. <style>html{background:url(http://av.wuiso.com/1/demo_bg.png)}</style>
  1. 这里你可以给背景添加一些css属性比如宽度和高度
  1. css代码是background-size:100% auto;
  1. 这里的100%就是宽度 auto就是高度。
  1. background:center;就是居中显示。
  1. 如何让它固定背景不跟随鼠标滑动呢?
  1. 就是    background-attachment: fixed;
  1. background-repeat: no-repeat;这个属性表示不拉伸

 

背景缩放(CSS3)

通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下:

a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)

b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px; /* background-size: contain; */ /* background-size: cover; */

多背景(CSS3)
以逗号分隔可以设置多背景,可用于自适应布局 做法就是 用逗号隔开就好了。

  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
  • 为了避免背景色将图像盖住,背景色通常都定义在最后一组上,

无折腾,不生活