Rumah hujung hadapan web tutorial css CSS语法手册(五)颜色和背景属性

CSS语法手册(五)颜色和背景属性

Dec 19, 2016 pm 04:16 PM
sifat latar belakang warna

1、color

功能:设置前景或元素的颜色。
数值:使用颜色关键字或RGB值。
例子:


文本颜色(关键字)

文本颜色(#rrggbb)

文本颜色[rgb(rr,gg,bb)]

文本颜色[rgb(r%,g%,b%)]

2、background-color

功能:设置页面或页面元素的背景颜色。
数值:
颜色 - 可用颜色名或RGB值
transparent - 透明,使页面背景为缺省背景。
例子:


背景颜色

3、background-image

功能:定义背景图形。
数值:
none - 不用图形作背景
url - 提供图形文件的URL地址
说明:也可以包括background-color属性以便在找不到图形时代用
例子:


    图形背景

4、background-repeat

功能:控制图形背景是否重复排列。
数值:
repeat - 垂直和水平重复,缺省值
repeat-x - 水平重复
repeat-y - 垂直重复
no-repeat - 不重复
说明:这个属性和 background-image 和 background-position 属性一起使用。
例子:


  水平重复排列

5、background-attachment

功能:指定元素的背景是随元素一起滚动还是固定在页面某个位置上。
数值:
scroll - 随元素一起滚动
fixed - 固定
说明:
缺省值是 scroll,这个属性和 background-image 属性一起使用。

6、background-position

功能:用于在空间中定位元素背景
数值:
长度 - 相对或绝对单位设置元素框边缘的起点,并给出单位下的坐标。
百分比 - 用百分比表示框边缘上浏览器开始放图的位置。可以重复这个值也提供垂直和水平起点
垂直位置 - 设置竖直方向的起点,关键字为 top, center, bottom
水平位置 - 设置水平方向的起点,关键字 left, center, right
例如:top left, left top和0% 0% 都表示图形左上角从元素框左上角开始
例子:


Body {background-image:url(logo.gif); background-position:50% 50%}

这个语句将 Body 基本类设置为背景图形在页面上居中显示。

7、background

功能:简写属性,可以设置所有背景属性。
数值:
background-attachment
background-color
background-image
background-position
background-repeat
有关上述数值的细节,见各个属性部分。

 以上就是CSS语法手册(五)颜色和背景属性的内容,更多相关内容请关注PHP中文网(www.php.cn)! 


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menukar warna bar tajuk pada Windows 11? Bagaimana untuk menukar warna bar tajuk pada Windows 11? Sep 14, 2023 pm 03:33 PM

Bagaimana untuk menukar warna bar tajuk pada Windows 11?

Cara Menyongsangkan Warna pada Windows 11 [Menggunakan Pintasan] Cara Menyongsangkan Warna pada Windows 11 [Menggunakan Pintasan] Apr 14, 2023 pm 02:43 PM

Cara Menyongsangkan Warna pada Windows 11 [Menggunakan Pintasan]

Titanium Asli: Mendedahkan Warna Sebenar iPhone 15 Pro Titanium Asli: Mendedahkan Warna Sebenar iPhone 15 Pro Sep 18, 2023 pm 02:13 PM

Titanium Asli: Mendedahkan Warna Sebenar iPhone 15 Pro

Tutorial terperinci tentang cara menetapkan aplikasi warna perlindungan mata pada komputer win10 Tutorial terperinci tentang cara menetapkan aplikasi warna perlindungan mata pada komputer win10 Jul 08, 2023 am 10:46 AM

Tutorial terperinci tentang cara menetapkan aplikasi warna perlindungan mata pada komputer win10

Adakah anda tahu bagaimana untuk menetapkan warna jadual dokumen WPS? Adakah anda tahu bagaimana untuk menetapkan warna jadual dokumen WPS? Mar 20, 2024 am 08:19 AM

Adakah anda tahu bagaimana untuk menetapkan warna jadual dokumen WPS?

Bagaimana untuk menyelesaikan masalah warna abnormal monitor Win7 Bagaimana untuk menyelesaikan masalah warna abnormal monitor Win7 Jan 14, 2024 pm 06:54 PM

Bagaimana untuk menyelesaikan masalah warna abnormal monitor Win7

Bagaimana untuk menukar warna bar tugas Windows 10 Bagaimana untuk menukar warna bar tugas Windows 10 Jan 01, 2024 pm 09:05 PM

Bagaimana untuk menukar warna bar tugas Windows 10

Memori siri X100 baharu Vivo, pendedahan warna: semua siri bermula pada 12+256GB Memori siri X100 baharu Vivo, pendedahan warna: semua siri bermula pada 12+256GB May 06, 2024 pm 03:58 PM

Memori siri X100 baharu Vivo, pendedahan warna: semua siri bermula pada 12+256GB

See all articles