recherche
Maisoninterface Webtutoriel CSSCSS语法手册(五)颜色和背景属性

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

Dec 19, 2016 pm 04:16 PM
背景属性颜色

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)! 


Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
C'est tout dans la tête: gérer la tête de document d'un site alimenté par réact avec un casque ReactC'est tout dans la tête: gérer la tête de document d'un site alimenté par réact avec un casque ReactApr 15, 2025 am 11:01 AM

Le chef de document n'est peut-être pas la partie la plus glamour d'un site Web, mais ce qui y va est sans doute tout aussi important pour le succès de votre site Web que son

Qu'est-ce que Super () dans JavaScript?Qu'est-ce que Super () dans JavaScript?Apr 15, 2025 am 10:59 AM

Qu'est-ce qui se passe quand vous voyez un JavaScript qui appelle super () ?. Dans une classe d'enfants, vous utilisez super () pour appeler le constructeur et le super. pour accéder à son

Comparaison des différents types de popups JavaScript natifsComparaison des différents types de popups JavaScript natifsApr 15, 2025 am 10:48 AM

JavaScript possède une variété d'API popup intégrés qui affichent l'interface utilisateur spéciale pour l'interaction utilisateur. Fameusement:

Pourquoi les sites Web accessibles sont-ils si difficiles à construire?Pourquoi les sites Web accessibles sont-ils si difficiles à construire?Apr 15, 2025 am 10:45 AM

L'autre jour, je discutais avec des gens frontaux sur les raisons pour lesquelles tant d'entreprises ont du mal à créer des sites Web accessibles. Pourquoi les sites Web accessibles sont-ils si durs

L'attribut `` caché 'est visiblement faibleL'attribut `` caché 'est visiblement faibleApr 15, 2025 am 10:43 AM

Il y a un attribut HTML qui fait exactement ce que vous pensez qu'il devrait faire:

Un regard sur la vitesse de Jamstack, par les chiffresUn regard sur la vitesse de Jamstack, par les chiffresApr 15, 2025 am 10:39 AM

Les gens disent que les sites Jamstack sont rapides - découvrons pourquoi en regardant de vraies mesures de performance! Nous couvrirons les métriques communes, comme le temps de premier octet

Modèles d'utilisation des propriétés personnalisées CSS pratiquesModèles d'utilisation des propriétés personnalisées CSS pratiquesApr 15, 2025 am 10:34 AM

Je joue avec des propriétés personnalisées CSS pour découvrir leur puissance car le support du navigateur est enfin à un endroit où nous pouvons les utiliser dans notre

Outils Jamstack et le spectre de la classificationOutils Jamstack et le spectre de la classificationApr 15, 2025 am 10:31 AM

Avec le monde merveilleux de Jamstack qui devient grand, toutes les catégories de services et d'outils qui l'aident sont toujours aussi importantes. Il y a un site statique

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel