CSS Backgrounds

粉丝

1小时前1小时

行政经理

CSS Backgrounds

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;
}

Try it Yourself »

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;
}

Try it Yourself »

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:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Example

div {
background-color: green;
opacity: 0.3;
}

Try it Yourself »

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:

100% opacity

60% opacity

30% opacity

10% opacity

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 */
}

Try it Yourself »

The CSS Background Color Property

Property	Description
background-color	Sets the background color of an element

Video: CSS Background Color

★ +1

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

CSS 12-Column Grid Layout
CSS 12-Column Grid Layout

Cavalry发布主题在教程

CSS 12-Column Grid Layout CSS 12-Column Grid Layout A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design. The 12-column grid system divides the available horizontal space into 12 equal-width columns, allowing for precise placement and sizing of elements within the layout. Benefits of a 12-Column Grid Flexibility: The number 12 is highly divisible. Designers can easily create designs with halves, thirds, and quarters (2 columns of 6, 3 columns of 4, 4 columns of 3). Responsiveness: A 12-column grid is ideal for building responsive websites that adapt to different screen sizes (desktop, tablet, or mobile) with mediaqueries. This provides a consistent user experience across all platforms. Efficiency: Having a pre-defined structure speeds up the design process. Here is how to create a basic 12-column CSS Grid layout: Define the Grid Container Apply display: grid; to the grid container. Create the 12 Columns Use the grid-template-columns property to define the 12 columns. The code repeat(12, [col-start] 1fr); creates a 12-column grid with equal-width, and names the start line of each column track col-start. repeat(12,..): Tells the grid to repeat the following track definition 12 times, resulting in 12 columns. [col-start]: This creates a named grid line. Because it is repeated 12 times, you will have 12 lines named col-start. This is useful for placing grid items at specific start points within the grid. 1fr: A fractional unit that represents one fraction of the total available space in the grid container. By using 1fr, each of the 12 columns will be an equal, fluid width. Place the Grid Items Grid items can then be placed and sized across these 12 columns using grid-column. To make a grid item span a certain number of columns, use grid-column: span <number>; or grid-column: <start-line> / span <number>;. You can also define the start and end grid lines for an item using grid-column: <start-line> / <end-line>;. Use Mediaqueries to Add Breakpoints Always design for mobile first: Here we display the sections in the source order (from top to bottom) for screens less than 576 pixels wide. Then, we go to a two-column layout for screens between 576 and 767 pixels wide. Then, we go to a three-column layout for screens over 767 pixels wide. Example Complete example of a 12-column grid layout: * { box-sizing: border-box; } .container { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); gap: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } /* Mobile first */ .container > * { border: 1px solid green; background-color: beige; padding: 10px; grid-column: col-start / span 12; } @media (min-width: 576px) { .sidebar { grid-column: col-start / span 3; grid-row: 3; } .ads { grid-column: col-start / span 3; } .content, .footer { grid-column: col-start 4 / span 9; } nav ul { display: flex; justify-content: space-between; } } @media (min-width: 768px) { .nav { grid-column: col-start / span 2; grid-row: 2 / 4; } .content { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .sidebar { grid-column: col-start 11 / span 2; } .ads { grid-column: col-start 11 / span 2; } .footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; } } Try it Yourself » ★ +1 Sign in to track progress
- 11分钟前11分钟
- 0篇回复
CSS Grid Layout
CSS Grid Layout

Cavalry发布主题在教程

CSS Grid Layout CSS Grid Layout Module The Grid Layout Module offers a grid-based layout system, with rows and columns. The Grid Layout Module allows developers to easily create complex web layouts. The Grid Layout Module makes it easy to design a responsive layout structure, without using float or positioning. My Header Link 1 Link 2 Link 3 Lorem IpsumLorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut. Footer Try it Yourself » Grid vs. Flexbox CSS Grid is used for two-dimensional layout, with rows AND columns. CSS Flexbox is used for one-dimensional layout, with rows OR columns. CSS Grid Components A grid always consists of: A Grid Container - The parent (container) element, where the display property is set to grid or inline-grid One or more Grid Items - The direct children of the grid container automatically becomes grid items A Grid Container with Five Grid Items The element below represents a grid container (the blue area) with five grid items. 1 2 3 4 5 Example A grid container with five grid items: <html> <head> <style> .container { display: grid; grid-template-columns: auto auto auto; background-color: dodgerblue; padding: 10px; } .container div { background-color: #f1f1f1; border: 1px solid black; padding: 10px; font-size: 30px; text-align: center; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html> Try it Yourself » Note: You will learn more about grid containers and grid items in the next chapters. All CSS Grid Properties Property Description align-content Vertically aligns the whole grid inside the container (when total grid size is smaller than container) align-items Specifies the default alignment for items inside a flexbox or grid container align-self Aligns the content for a specific grid item along the column axis display Specifies the display behavior (the type of rendering box) of an element column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout justify-content Horizontally aligns the whole grid inside the container (when total grid size is smaller than container) justify-self Aligns the content for a specific grid item along the row axis place-self A shorthand property for the align-self and the justify-self properties place-content A shorthand property for the align-content and the justify-content properties row-gap Specifies the gap between the grid rows ★ +1 Sign in to track progress
- 11分钟前11分钟
- 0篇回复
CSS Responsive Flexbox
CSS Responsive Flexbox

Cavalry发布主题在教程

CSS Responsive Flexbox Responsive Flexbox You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices. For example, if you want to create a three-column layout for large screen sizes, and a one-column layout for small screen sizes (such as phones), you can change the flex-direction from row to column at a specific breakpoint (600px in the example below): 1 2 3 Resize the browser window to see the effect. Example .flex-container { display: flex; flex-direction: row; } .flex-item { background-color: #f1f1f1; padding: 10px; font-size: 30px; text-align: center; width: 100%; } /* Make a one column-layout instead of three-column layout */ @media (max-width: 600px) { .flex-container { flex-direction: column; } } Try it Yourself » Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work: Example .flex-container { display: flex; flex-wrap: wrap; } .flex-item { background-color: #f1f1f1; padding: 10px; text-align: center; font-size: 30px; flex: 33.3%; } /* Make a one column-layout instead of a three-column layout */ @media (max-width: 600px) { .flex-item { flex: 100%; } } Try it Yourself » Responsive Image Gallery using Flexbox Here, we use media queries together with flexbox to create a responsive image gallery: Try it Yourself » Responsive Website using Flexbox Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content: Try it Yourself » ★ +1 Sign in to track progress
- 11分钟前11分钟
- 0篇回复

CSS Backgrounds

推荐的帖子

CSS Backgrounds

CSS Backgrounds

CSS background-color

Example

Other Elements

Example

Opacity / Transparency

Example

Transparency using RGBA

Example

The CSS Background Color Property

Video: CSS Background Color

参与讨论

动态

CSS 12-Column Grid Layout

CSS Grid Layout

CSS Responsive Flexbox

24 小时内在线的用户 1

帐户

导航

搜索

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)