>  기사  >  웹 프론트엔드  >  한 번의 트릭으로 CSS 요소를 사용하여 다채로운 배경 만들기

한 번의 트릭으로 CSS 요소를 사용하여 다채로운 배경 만들기

醉折花枝作酒筹
醉折花枝作酒筹원래의
2021-08-12 15:28:452463검색

이 기사는 새로운 장을 시작합니다. 모든 멋진 것들은 색상과 불가분의 관계에 있습니다. 오늘 우리는 가장 간단한 것, 즉 요소의 배경색을 설정하는 것을 배울 것입니다. 와서 배우세요.

배경색이 없는 요소는 보기에 좋지 않기 때문에 요소의 배경색을 설정해야 합니다.

배경색이 무엇인지, 어떻게 설정하는지 이해하기 위해 먼저 작은 예를 살펴보겠습니다.

우리는 div 요소와 p 요소를 가지고 있습니다. 이제 div 요소의 배경색은 빨간색이고 p 요소의 배경색은 파란색이기를 원합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      background-color: red;
    }
    p{
      background-color:blue;
    }
  </style>
</head>
<body>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
</body>
</html>

이 작은 예제의 결과는

한 번의 트릭으로 CSS 요소를 사용하여 다채로운 배경 만들기

입니다. 질문에서 제시한 요구 사항을 완료한 것을 볼 수 있습니다. div 요소의 배경색은 빨간색이고 p 요소의 배경색은 파란색입니다. .

많은 것을 알아본 후, 배경색을 설정할 수 있는 속성이 무엇인지 살펴보겠습니다.

배경색 속성은 요소의 배경색을 설정합니다. 이 속성은 요소의 단색을 설정합니다. 이 색상은 요소의 콘텐츠, 안쪽 여백 및 테두리 영역을 채우며 요소 테두리의 외부 경계까지 확장됩니다(여백은 아님). 테두리에 투명한 부분(예: 점선 테두리)이 있는 경우 배경색은 이러한 투명한 부분을 통해 표시됩니다. background-color属性设置元素的背景颜色。这个属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

这个属性还有一个十分重要的值,这是一个透明值。尽管在大多数情况下,没有必要使用 transparent

이 속성도 매우 중요한 값, 즉 투명한 값을 가지고 있습니다. 대부분의 경우 transparent를 사용할 필요는 없습니다. 그러나 요소에 배경색을 지정하지 않고 사용자의 브라우저 색상 설정이 디자인에 영향을 주지 않도록 하려면 여전히 투명 값을 설정해야 합니다.

추천 학습: css 비디오 튜토리얼

🎜

위 내용은 한 번의 트릭으로 CSS 요소를 사용하여 다채로운 배경 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.