How To Set Background to Transparent or Non-transparent

Q

How To Set Background to Transparent or Non-transparent? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

✍: FYIcenter.com

A

If you want to set the background of a block element to be transparent or non-transparent, you can use the background-color style property as shown below:

{background-color: transparent} - Sets background to be transparent.
{background-color: #ddddff} - Sets background to be non-transparent with a light blue color.

The following tutorial exercise shows you a comparison of transparent and non-transparent backgrounds:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 450px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#one {width: 180px; height: 300px; 
    margin: 10px 10px 10px 10px;
    background-color: transparent}
  P#two {width: 180px; height: 300px; 
    margin: 10px 10px 10px 10px;
    background-color: #ddddff}
</style>
</head><body><div class="page">
<H1>Transparent and Non-transparent Backgrounds</H1>
<table id=out><tr>
<td id=box><p id=one>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
Remember to tell your friends about FYIcenter.com.
</p></td>
<td id=box><p id=two>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
Remember to tell your friends about FYIcenter.com.
</p></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

This HTML and CSS document will be displayed as:

2007-05-11, 7765👍, 0💬

What Is the Text Paragraph Formatting Model
What Is the Text Paragraph Formatting Model? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements A text paragraph is divided into lines to for a stack of line boxes. Each line box is a rectangular with a line height and sharing the same width as the content box of the enclos... 2007-05-11, 5753👍, 0💬

How In-Line Elements Are Mixed in Text Lines
How In-Line Elements Are Mixed in Text Lines? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If an in-line element is mixed in a text line, it will be placed immediately after the preceding character. The vertical position of the in-line element will be determined by it... 2007-05-09, 5638👍, 0💬

How To Specify Is the Color of the Margin Area
How To Specify Is the Color of the Margin Area? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS doesn't allow you to specify the color of the margin area of a block element. The color of the margin area is transparent. It means that the background color or background... 2007-05-11, 4995👍, 0💬

How In-line Elements Affect Line Box Heights
How In-line Elements Affect Line Box Heights? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If a line box contains only text without any in-line elements, its height is equal to the line-height property of the enclosing block element. If a line box contains text mixed ... 2007-05-09, 4959👍, 0💬

What Are the Background Properties of a Block Element
What Are the Background Properties of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements The background of a block element can be formatted in different ways: Transparent to show the background of the parent element. Non-transparent background with a specif... 2007-05-11, 4875👍, 0💬

Hot To Test Margin Spaces on All 4 Sides
Hot To Test Margin Spaces on All 4 Sides? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If you want test margin spaces on all 4 sides of a <P> tag you can use the following HTML and CSS document. It allows you to specify margin spaces with different values and v... 2007-05-11, 4765👍, 0💬

Is FORM a Block Element
Is FORM a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements Is <FORM> a block element? The answer is yes. <FORM> is behaves like a <P>. Below is a good example of a floating block element and a floating inline element: <html>&... 2007-05-11, 4651👍, 0💬

How To Add Images to Backgrounds
How To Add Images to Backgrounds? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements One image can be specified to the background at a particular position. It can also be repeated in horizontal direction, vertical direction, or both directions with the following style prope... 2007-05-11, 4637👍, 0💬

How To Specify Margin Spaces of a Block Element
How To Specify Margin Spaces of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS offers 4 style properties to control margin spaces of a block element. You can specify them in different ways as shown in the following CSS examples: {margin-top: 30px} -... 2007-05-11, 4510👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.