search

博客列表 >背景常用属性的使用方法

背景常用属性的使用方法

霏梦
霏梦原创
2020年06月20日 08:46:56760浏览

- 作者：霏梦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>背景各个属性的展示</title>
  7.     <style>
  8.       .box {
  9.         width: 400px;
  10.         height: 400px;
  11.         /* border: 1px solid red; */
  12.         /* border-radius: 15px; */
  13.         border-radius: 200px;
  15.         /* 背景色 */
  16.         background-color: aquamarine;
  17.         /* padding: 20px; */
  18.         /* 背景裁切 */
  19.         background-clip: content-box;
  20.         /* background: red; */
  21.         /* 渐变化 */
  22.         background: linear-gradient(red, yellow);
  23.         background: linear-gradient(45deg, red, yellow);
  24.         background: linear-gradient(to right, red, yellow);
  25.         background: linear-gradient(to left, red, yellow);
  26.         background: linear-gradient(to left, red, white, yellow, blue);
  27.         background: linear-gradient(
  28.           to left,
  29.           rgba(255, 0, 0, 0.5),
  30.           white,
  31.           yellow,
  32.           blue
  33.         );
  35.         background-clip: content-box;
  37.         /* 背景图片 */
  38.         /* background-image: url("girl.jpg"); */
  39.         /* 不重复显示 */
  40.         background-repeat: no-repeat;
  41.         /* background-repeat: repeat-x; */
  42.         /* 固定 */
  43.         /* background-attachment: fixed; */
  45.         /* 背景定位 */
  46.         /* 水平方向和垂直方向 */
  47.         /* background-position: 50px 0; */
  48.         /* background-position: 50px 50px; */
  49.         background-position: right center;
  50.         background-position: center right;
  51.         /* 只写一个，第二个就是默认center*/
  52.         /* background-position: left; */
  53.         /* 水平是50% */
  54.         background-position: 50% 50%;
  55.         background-size: contain;
  56.         background-size: cover;
  57.         /* 简写 */
  58.         background: violet;
  59.         /* background: url("girl.jpg") no-repeat right; */
  60.         background: url("girl.jpg") no-repeat center;
  61.         position: relative;
  62.         top: 30px;
  63.         left: 30px;
  64.         /* 阴影 */
  65.         /* box-shadow: 5px 10px 10px #888888; */
  66.         /* 外发光 */
  67.         /* box-shadow: 0 0 10px #888888; */
  68.       }
  69.       .box:hover {
  70.         /* 外发光 */
  71.         box-shadow: 0 0 10px #888888;
  72.         cursor: pointer;
  73.       }
  74.     </style>
  75.   </head>
  76.   <body>
  77.     <div class="box"></div>
  78.   </body>
  79. </html>

girl

上一条：实列背景实战：精灵图/雪碧图下一条：小白成为全栈工程师所必备的工具使用和插件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多