Sample code sharing about background color and background image in CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Sample code sharing about background color and background image in CSS

黄舟

Jul 19, 2017 am 10:50 AM

css

Using CSS, you can specify a background image or background color for the html tag, and you can set the position of the image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<!--
（1）设置背景颜色：background-color
（2）设置背景图像：background-image
（3）设置背景图像的重复：background-repeat
（4）背景定位：background-position
（5）背景关联：background-attachment
-->
<head>
  <style>
    h1 {background-color:#afa}
    h2 {background-color:rgb(255,187,187)}
    p#bgImage 
      {
      background-image:url(images/bg_image.jpg);
      padding:10px;
      }

    p#bgImageKeywords
      {
      background-color:#ddd;
      background-image:url(images/d_sikao.png);
      padding:30px;
      background-repeat:no-repeat;
      background-position:left bottom;
      }

      p#bgImagePercent
      {
      width:400px;
      background-color:#ddd;
      background-image:url(images/d_sikao.png);
      padding:40px;
      background-repeat:no-repeat;
      background-position:20% 80%;
      }

      p#bgImageOffset
      {
      width:400px;
      background-color:#ddd;
      background-image:url(images/d_sikao.png);
      padding:40px;
      background-repeat:no-repeat;
      background-position:200px 20px;
      }

      p#bgImageAttach
      {
      background-image:url(images/bg_image.jpg);
      padding:10px;
      background-attachment:fixed;
      }
  </style>
</head>

<title>CSS 背景</title>

<body>
  <h1 id="这是一个h-级别的标题-淡绿色">这是一个h1级别的标题：淡绿色</h1>
  <h2 id="这是一个h-级别的标题-淡红色">这是一个h2级别的标题：淡红色</h2>
  <h3 id="这是一个h-级别的标题-没有设定样式">这是一个h3级别的标题（没有设定样式）</h3>

  <p id="bgImage">
    <p>这个段落有背景图像，有内边距，允许重复（默认）<p>
  </p>

  <br/>
  <!--使用 关键字 描述背景图像的位置。位置关键字可以按任何顺序出现，只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。-->
  <p id="bgImageKeywords">
    <p>淡灰色背景色，同时有背景图像，不允许重复，背景图像居 左下方 显示<p>
  </p>

  <br/>
  <!--使用 百分比 描述背景图像的位置。百分比是图像相对于元素的位置（而不是整个浏览器窗口）。
      如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。-->
  <p id="bgImagePercent" >
    <p>背景图像相对元素居 水平20%，垂直80% 显示<p>
  </p>

  <br/>
  <!--使用 偏移量 描述背景图像的位置。即图像的左上角与 background-position 声明中的指定的点对齐。-->
  <p id="bgImageOffset">
    <p>背景图像相对元素左上角的偏移量为水平200px，垂直20px<p>
  </p>

  <br/>
  <!--背景关联。如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。-->
  <p id="bgImageAttach">
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
  </p>

</body>

</html>

Rendering:

The above is the detailed content of Sample code sharing about background color and background image in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Next Level CSS Styling for CursorsApr 23, 2025 am 11:04 AM

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Worlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AM

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Using CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AM

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

SMIL on?Apr 23, 2025 am 09:57 AM

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

Feeling Like I Have No Release: A Journey Towards Sane DeploymentsApr 23, 2025 am 09:19 AM

Deploying like an idiot comes down to a mismatch between the tools you use to deploy and the reward in complexity reduced versus complexity added.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

4 weeks agoByDDD

Atomfall guide: item locations, quest guides, and tips

4 weeks agoByDDD

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux latest version

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Dreamweaver Mac version

Visual web development tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Hot Topics

Where is the login entrance for gmail email?

7663

CakePHP Tutorial

1393

C# Tutorial

1205

What is the format of the account name of steam

win11 activation key permanent