WEB前端网页设计 HTML CSS 网页设计参数 - 【浏览器背景图片】

”图片背景“给谁加背景即选择谁作为选择器

background-image：url（图片路径）；	只有此一条代码，背景则会重复显示
background-repeat: no-repeat	此条表示 只显示一张图片背景
background-repeat: repeat-x	表示图片背景按水平排序
background-repeat: repeat-y	表示图片背景按垂直排序
background-repeat: repeat	默认值，全覆盖
background-color: rgba( 1/0 ); 格式：rgba(0,0,0,1) 前三位表示颜色，第四位表示是否透明	设置背景颜色的透明度 0表示全透明；1表示不透明
border-right-color: transparent;	直接将颜色变为透明

background-size 背景图片的大小

百分比%	两个值  表示 宽度 和 高度
像素px	两个值  表示 宽度 和 高度
cover	把图片扩展到足够大，使背景图像完全覆盖背景区域
contain	把图像扩展到最大尺寸，使其宽度和高度完全适应内容区域

背景图像的位置  px

主要定位于左上角

background-position：20px  25px	表示左边离父元素20px，上面离父元素25px
background-position：0  0  / left  top	即位于元素的左上角

background-position属性取值单位

水平方向	left   center   right
垂直方向	top   center   bottom

百分比定位

图像的左上角对齐元素的左上角	0%  0%
图像的中点对齐元素的中点	50%  50%
图像20%  30%的点和元素20% 30%的点对齐	20%   30%
图像的右下角对齐元素的右下角	100%   100%
如果只有一个百分数，将作为水平值； 垂直默认值为50%

无序列表  ：

标签

项目符号  ：

• 标签

  disc"> 或 li{ list-style-type：none； }	none  无标记 disc    实心圆 circle  空心圆 square  实心方块 decimal  数字
  background-image: url(图片路径);	使用指定图片作为项目符号
  ul {   padding-left: 2rem; //设置列表左边间隔以放置图片   list-style-type: none; //取消默认的项目符号图标 } ul li {   list-style-type：none   //先取消项目符号   padding-left: 2rem;    //设置列表左边间隔以放置图片   background-image: url(图片路径);  //为每一个li插入图片   background-position: 0 0;    //定位为最左和最上   background-size:  1.6rem;      //为图片与li设置0.4rem的间隔   background-repeat: no-repeat;  //取消默认的图片复制，就显示一个图标 }

  用border边框做三角形

  .a{ width: 50px; height: 50px; border: black solid; border-width: 30px; border-color: red green yellow blue;  /*上右下左*/ border-top-width: 0px; border-left-color: rgba(0,0,0,0); border-right-color: transparent; }

  #用边框做三角形 将长、宽改成0px， 将边框颜色改为透明或白色， 显示其中一个颜色即可

 

设置背景图像固定background-attachment

scroll	图像随页面元素一起滚动
fixed	图像固定在屏幕上，不随屏幕一起滚动

设置多重背景图像

（以逗号隔开各项参数）

background-image:url(图片)，url(图片)，url(图片)；

background-position: left  bottem，right  top，center  center;