首页 > 其他分享 >css13 CSS Backgrounds

css13 CSS Backgrounds

时间：2024-05-29 22:44:25浏览次数：15  
标签：Try css13 image Backgrounds scroll down background page CSS

https://www.w3schools.com/css/css_background.asp

The CSS background properties are used to add background effects for elements.

In these chapters, you will learn about the following CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background (shorthand property)

CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

body {
  background-color: lightblue;
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

 

With CSS, a color is most often specified by:

  • a valid color name - like "red"
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:

Example

Here, the <h1>, <p>, and <div> elements will have different background colors: 

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
} 
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

 

   

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:

 


Example

div {
  background-color: green;
  opacity: 0.3;
} 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>

 

Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

 

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
} 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

 

The CSS Background Color Property

PropertyDescription
background-color Sets the background color of an element

 

 

 

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example

Set the background image for a page: 

body {
  background-image: url("paper.gif");
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

 

Example

This example shows a bad combination of text and background image. The text is hardly readable: 

body {
  background-image: url("bgdesert.jpg");
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

 

Note: When using a background image, use an image that does not disturb the text.

The background image can also be set for specific elements, like the <p> element:

Example

p {
  background-image: url("paper.gif");
} 
<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>

 

The CSS Background Image Property

PropertyDescription
background-image Sets the background image for an element

 

 

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
  background-image: url("gradient_bg.png");
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.w3schools.com/css/gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

 

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

 

Tip: To repeat an image vertically, set background-repeat: repeat-y;

CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

Show the background image only once:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image only shows once, but it is disturbing the reader!</p>

</body>
</html>

 

In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

CSS background-position

The background-position property is used to specify the position of the background image.

Example

Position the background image in the top-right corner: 

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

 

The CSS Background Repeat and Position Properties

PropertyDescription
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

 

 

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Example

Specify that the background image should be fixed:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>

 

Example

Specify that the background image should scroll with the rest of the page:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: scroll;
}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>

</body>
</html>

 

The CSS Background Attachment Property

PropertyDescription
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

 

 

 

CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

Instead of writing:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

You can use the shorthand property background:

Example

Use the shorthand property to set the background properties in one declaration:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value.

Test Yourself With Exercises

Exercise:

Set the background color of the <h1> element to "lightblue".

<style>
h1 {
  : lightblue;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Start the Exercise

All CSS Background Properties

PropertyDescription
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image(s) is/are positioned
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)

 

标签：Try,css13,image,Backgrounds,scroll,down,background,page,CSS
From： https://www.cnblogs.com/emanlee/p/18221265

相关文章

  • css12 CSS HEX Colors
    https://www.w3schools.com/css/css_colors_hex.aspAhexadecimalcolorisspecifiedwith:#RRGGBB,wheretheRR(red),GG(green)andBB(blue)hexadecimalintegersspecifythecomponentsofthecolor.HEXValueInCSS,acolorcanbespecifiedusingahex......
  • css11 CSS RGB Colors
    css11CSSRGBColorshttps://www.w3schools.com/css/css_colors_rgb.aspAnRGBcolorvaluerepresentsRED,GREEN,andBLUElightsources.RGBValueInCSS,acolorcanbespecifiedasanRGBvalue,usingthisformula:rgb(red,green,blue)Eachparameter(......
  • css09 CSS Comments
    https://www.w3schools.com/css/css_comments.aspCSScommentsarenotdisplayedinthebrowser,buttheycanhelpdocumentyoursourcecode.CSSCommentsCommentsareusedtoexplainthecode,andmayhelpwhenyoueditthesourcecodeatalaterdate.Com......
  • css10 CSS Colors
    https://www.w3schools.com/css/css_colors.asp Colorsarespecifiedusingpredefinedcolornames,orRGB,HEX,HSL,RGBA,HSLAvalues.CSSColorNamesInCSS,acolorcanbespecifiedbyusingapredefinedcolorname: <!DOCTYPEhtml><html&g......
  • css07 CSS Attribute Selectors
    https://www.w3schools.com/css/css_attribute_selectors.aspStyleHTMLElementsWithSpecificAttributesItispossibletostyleHTMLelementsthathavespecificattributesorattributevalues.CSS[attribute]SelectorThe[attribute]selectorisusedtos......
  • css08 How To Add CSS
    https://www.w3schools.com/css/css_howto.aspWhenabrowserreadsastylesheet,itwillformattheHTMLdocumentaccordingtotheinformationinthestylesheet.ThreeWaystoInsertCSSTherearethreewaysofinsertingastylesheet:ExternalCSSInte......
  • at-rule or selector expectedcss(css-ruleorselectorexpected)
    问题如图所示，在使用scss和less是使用//注释就会出现红色报错，这个不影响运行，但是看着很不舒服。解决没有找到什么好的解决办法，一般的解决方法是，把验证关闭，然后重启。但是后面我开启这个设置，再进行注释，没有报错，感觉还是重启的作用。先放着不管吧。......
  • 7. CSS 网格布局
    CSS3引入了强大的网格布局（GridLayout），它提供了一种二维的布局方式，使得创建复杂的网页布局变得更加简单和直观。通过定义行和列，我们可以精确控制网页元素的排列和对齐。本章将详细介绍网格布局的基本概念和属性，并通过具体示例帮助读者掌握如何使用网格布局。7.1网格布局简......
  • css06 CSS Pseudo-elements
    https://www.w3schools.com/css/css_pseudo_elements.aspWhatarePseudo-Elements?ACSSpseudo-elementisusedtostylespecifiedpartsofanelement.Forexample,itcanbeusedto:Stylethefirstletter,orline,ofanelementInsertcontentbefore,or......
  • 8. CSS弹性布局基础
    第8章弹性布局基础CSS3引入了一个强大的布局模块——弹性布局（Flexbox），它提供了一种更加高效、直观的方式来排列和对齐元素，使复杂布局的实现变得更加简单。本章将详细介绍弹性布局的基本概念和属性，并通过具体示例帮助读者掌握如何使用弹性布局。8.1弹性布局简介弹性布局（F......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99