CSS 背景属性概览:颜色、图像、位置、组合及透明

news2024/9/27 14:21:32

目录

非 VIP 用户可前往公众号回复“css”进行免费阅读

background - color

background - image

background - repeat

background - position

background - attachment

background组合

背景透明


非 VIP 用户可前往公众号回复“css”进行免费阅读

background - color


        颜色表示法:在 CSS2.1 里,颜色的表示方法有以下几种:单词表示法,例如 “red”,“blue” 等;rgb 表示法,像 “rgb (255, 0, 0)” 就表示红色;还有十六进制表示法,比如 “#FF0000” 也是用来表示红色的。

        进制转换相关概念:

        10 进制是基于0 - 9这10 个数字构建起来的,而16进制则是基于0 - 9以及a - f这16个字符构建的。

        以 16 进制中的 13 为例,按照位权来计算其对应的1 进制数值。具体计算为:1*16+3*1=19(10 进制)。

        对于十六进制颜色,像 #aabbcc 这种形式,在确保颜色视觉效果相近的条件下,可以简化为 #abc,这是一种对代码进行简化的有效方式。

        示例代码如下:

        css:

<style type="text/css">  
    *{  
        margin: 0;  
        padding: 0;  
    }  
    div{  
        width: 200px;  
        height: 50px;  
        border:1px solid blue;  
        margin:10px 0 0 10px;  
    }  
    .box1{  
        background-color: skyblue;  
    }  
    .box2{  
        background-color: #87ceeb;  
    }  
    .box3{  
        background-color: rgb(135,206,235);  
    }  
</style>  

        html:

<body>  
    <div class="box1">box1</div>  
    <div class="box2">box2</div>  
    <div class="box3">box3</div>  
</body>  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2170213.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Stable Diffusion绘画 | SDXL模型的优缺点及模型推荐

现在 SD 已经开始全面进入 SDXL 的高分辨率时代。 SDXL 模型的优点 学习参数最多的模型&#xff1a;参数总量超过100亿&#xff0c;可对标 Midjourney 分辨率提升4倍&#xff1a;底模分辨率直接为 1024 x 1024 多出 Refiner 采样重构器&#xff1a;能增加更多的细节 更强的提示…

2024上海工博会,正运动展位新品与应用方案(二)

上海&#xff0c;9月26日&#xff0c;上海工博会已成功开展三天。正运动展位&#xff08;6.1H-E261&#xff09;依然人气高涨&#xff0c;吸引了众多专业观众和行业同仁的关注。精彩仍在继续&#xff5e; 展会现场 01 多元工业应用场景方案展示 DEMO应用演示在本次展会上&…

云打包p12苹果证书和profile文件在线制作流程

使用hbuilderx的uniapp框架&#xff0c;除了开发小程序外&#xff0c;还可以打包出原生的安卓或苹果应用。 假如是打包安卓应用个&#xff0c;则需要安卓证书。 而假如打包ios应用&#xff0c;则需要p12格式的苹果证书和苹果证书的profile文件。其中苹果证书可以理解为基于非…

c++----继承(初阶)

大家好呀&#xff0c;今天我们也是多久没有更新博客了&#xff0c;今天来讲讲我们c加加中的一个比较重要的知识点继承。首先关于继承呢&#xff0c;大家从字面意思看&#xff0c;是不是像我们平常日常生活中很容易出现的&#xff0c;比如说电视剧里面什么富豪啊&#xff0c;去了…

CDF 累积分布函数图 怎么看

以上图为例&#xff0c;图中有五个数据集&#xff0c;每条曲线代表每个数据集中流的数量&#xff0c;然后我以蓝色的线条为例去解释怎么看这个图。 红色的方框的点说明&#xff0c;dataset-1中流数量少于500的app占全部app的20%&#xff1b;紫色的方框的点说明&#xff0c;da…

win10下NAT 端口转发及ssh VMware ubuntu24虚拟机

问题&#xff1a;win10无法访问VMware ubuntu24虚拟机。ping不通&#xff0c;ssh不通。 现象&#xff1a; 无法设置网桥模式。原因不明。win10 网络连接 中没有vmnet0 网桥模式。win10 网络连接 中&#xff0c;有vmnet8的NAT模式&#xff0c;有vmnet1的仅主机模式。VMware ub…

【Redis】Linux下安装配置及通过C++访问Redis

文章目录 一、Linux Centos 7.0版本下的安装及配置二、通过C访问Redis 一、Linux Centos 7.0版本下的安装及配置 通过源来安装&#xff0c;此次安装的版本为 redis 5.0 的&#xff0c;要通过其他源进行安装&#xff0c;首先安装 scl 源 yum install centos-release-scl-rh再安…

【LeetCode】每日一题 2024_9_26 数组元素和与数字和的绝对差(模拟)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;数组元素和与数字和的绝对差 代码与解题思路 func differenceOfSum(nums []int) int {sum1, sum2 : 0, 0for _, v : range nums {sum1 vfor v > 0 {sum2 v%10v / 10}}return sum1-s…

教师工作量在线管理服务

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

dockerfile部署springboot项目(构建镜像:ebuy-docker:v1.0)

文章目录 1、docker部署Mysql2、dockerfile构建镜像1.1、在idea中导入课件中的项目资料\day01\ebuy-docker1.2、修改项目application.yml数据库连接参数1.3、启动项目访问测试&#xff1a;http://localhost:8081/1.4、执行mvn package命令进行项目打包1.5、虚拟机中新建目录/op…

高性能计算秘密武器:NVIDIA B100与B200如何让你的HPC性能飙升?

嘿&#xff0c;各位科技界的狂热粉丝、AI领域的探索先锋&#xff0c;你们是否正站在高性能计算&#xff08;HPC&#xff09;的十字路口&#xff0c;寻找那把能开启全新纪元的钥匙&#xff1f;今天&#xff0c;就让我带你深入剖析NVIDIA的最新力作——B100与B200&#xff0c;一同…

C++结尾

面试题 1.什么是虚函数&#xff1f;什么是纯虚函数 在定义函数时前面加virtual。虚函数是为了&#xff0c;父子类中只有一个该函数。如果在子类重写虚函数&#xff0c;那么用的就是子类重写的虚函数&#xff1b;如果子类没有重写虚函数&#xff0c;那么调用的是父类继承的虚函…

【JAVA开源】基于Vue和SpringBoot的网上租赁系统

本文项目编号 T 050 &#xff0c;文末自助获取源码 \color{red}{T050&#xff0c;文末自助获取源码} T050&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计5.4.1 用…

生信软件37 - 基于测序reads的变异进行单倍型分型工具WhatsHap

1. WhatsHap简介 WhatsHap是一种使用DNA测序reads的基因组变异进行定相&#xff08;分型&#xff09;的软件&#xff0c;即基于reads的定相或单倍型组装&#xff0c;特别适用于长reads &#xff08;三代测序数据&#xff09;&#xff0c;但也兼容短reads的定相。 Whatshap特点…

Ubuntu22.04安装cudnn详细步骤

下载指定版本的cudnn https://developer.nvidia.com/rdp/cudnn-archive#a-collapse804-111 安装 sudo dpkg -i cudnn-local-repo-ubuntu2204-8.9.7.29_1.0-1_amd64.deb 根据上步提示&#xff1a; sudo cp /var/cudnn-local-repo-ubuntu2204-8.9.7.29/cudnn-local-08A7D361-…

【C++】STL标准模板库容器set

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:C ⚙️操作环境:Visual Studio 2022 目录 &#x1f4cc;关联式容器set(集合)简介 &#x1f4cc;set(集合)的使用 &#x1f38f;set(集合)的模板参数列表 &#x1f38f;set(集合)的构造函数 &#x1f38f;set(集合)的迭代…

【算法题】72. 编辑距离-力扣(LeetCode)

【算法题】72. 编辑距离-力扣(LeetCode) 1.题目 下方是力扣官方题目的地址 72. 编辑距离 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个字符替换一个…

哈希算法以及容器实现

哈希 一&#xff0c;哈希算法1.什么是哈希2.哈希产生的原因3.常见哈希算法4.闭散列&#xff08; 哈希表&#xff09;1.线性探测2.二次探测 5.开散列&#xff08;哈希桶&#xff09;1.开散列插入2.开散列扩容 二&#xff0c;代码实现1.哈希表2.哈希桶1.迭代器的实现2.底层容器的…

C++ --- 模板为什么不能分离编译?

模板为甚么不能分离编译&#xff0c;但普通函数却可以&#xff1f; 一、前置知识二、普通函数能分离编译的原因三、模板不能分离编译的原因 一、前置知识 编译阶段: 源代码到目标代码&#xff1a; 编译器首先将源代码&#xff08;如C/C文件&#xff09;翻译成汇编语言&#x…

初学51单片机之I2C总线与E2PROM

首先先推荐B站的I2C相关的视频I2C入门第一节-I2C的基本工作原理_哔哩哔哩_bilibili 看完视频估计就大概知道怎么操作I2C了&#xff0c;他的LCD1602讲的也很不错&#xff0c;把数据建立tsp和数据保持thd&#xff0c;比喻成拍照时候的摆pose和按快门两个过程&#xff0c;感觉还是…