• CSS学习————背景属性（4）

    一、颜色背景：

    1、backgound-color:纯颜色

     

    1. .box:nth-child(1) {
    2. 	background-color: darkred;
    3. }
    4. .box:nth-child(2) {
    5. 	background-color: black;
    6. 	opacity: .2;
    7. }
    8. .box:nth-child(3) {
    9. 	background-color: rgb(0, 255, 0);
    10. }
    11. .box:nth-child(4) {
    12. 	background-color: rgb(0, 255, 0, .1);
    13. }
    14. .box:nth-child(5) {
    15. 	background-color: hsl(270, 80%, 50%);
    16. }
    17. .box:nth-child(6) {
    18. 	background-color: hsla(270, 80%, 50%,.5);
    19. }
    20. .box:nth-child(7) {
    21. 	background-color: #FF00FF;
    22. }

    2、渐变颜色：

    2-1:线性渐变

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

    重复：repeating-linear-gradient() 函数

     

    2-2:径向渐变

    background-image: radial-gradient(shape size at position, start-color, ..., last-color);

    1、shape:circle | ellipse(默认值)，
    2、size 定义渐变的大小，可能值有：
    farthest-corner（默认）：指定径向渐变的半径长度为从圆心到离圆心最远的角；
    closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
    closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
    farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
    3、position ：top | bottom | center(默认值)

    二、图片背景

    1、background-image:

    2、background-repeat:repeat-x | repeat-y | no-repaet | repeat

    3、background-size:20px 30px  | 10% 20 %| cover | contain 

    百分比和具体像素，设置宽/高，如果高不设置默认auto

    4、background-position:

     

    5、background-attachment:

     

    4、background-origin:border-box | padding-box | content-box

    设置了poisition 以上属性无效

    5、规定背景的绘制区域： background-clip:border-box | padding-box | content-box

     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<style>
    5. 			:root {
    6. 				background-color: gray;
    7. 			}
    8.  
    9. 			.box {
    10. 				float: left;
    11. 				margin-left: 10px;
    12. 				height: 100px;
    13. 				width: 200px;
    14. 				color: #fff;
    15. 				border: 20px solid rgba(0, 0, 0, .5);
    16. 				padding: 20px;
    17. 				background-color: green;
    18. 			}
    19.  
    20. 			.box:nth-child(1) {
    21. 				background-clip: border-box;
    22. 			}
    23.  
    24. 			.box:nth-child(2) {
    25. 				background-clip: padding-box;
    26. 			}
    27.  
    28. 			.box:nth-child(3) {
    29. 				background-clip: content-box;
    30. 			}
    31. 		style>
    32. 	head>
    33. 	<body>
    34. 		<div class="box">设置border-box设置border-box设置border-box设置border-box设置border-boxdiv>
    35. 		<div class="box">设置padding-box设置padding-box设置padding-box设置padding-boxdiv>
    36. 		<div class="box">设置content-box设置content-box设置content-boxdiv>
    37. 	body>
    38. html>

    6、background-blend-mode：

     

     

    1. .box:nth-child(2) {
    2. 	background-image: url("img/bg_flower.gif"), url("./img/img_bg.jpg");
    3. 	background-repeat: no-repeat;
    4. 	background-size: 40%, 100%;
    5. 	background-origin: content-box, padding-box;
    6. 	background-blend-mode: overlay;
    7. }

  • 相关阅读:
    Qt界面实现中英文切换
    2022 6月软件测试面试题（400道）【附带答案】持续更新...
    源码探索之@LoadBalanced注解工作原理
    2、HTML——标题分组、居中、引用标签、水平线标签下划线标签、删除标签、＜font＞标签、图像标签
    MySQL字段类型汇总及用法（超详细）
    Rust的Slice切片
    水墨屏RFID超高频标签|RFID电子纸之组态软件操作说明2
    《痞子衡嵌入式半月刊》 第 59 期
    TypeScript常用知识点及其最佳实践总结
    马斯克热搜体质无疑，称已将大脑上传云端，却遭网友热议！
  • 原文地址：https://blog.csdn.net/meng_xiaoxiao/article/details/127443227