gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

further clarified the purpose of alt text (#32926)

Browse Source 
* further clarified the purpose of alt text

* fix: removed redundant content
This commit is contained in:
azrap
2018-12-16 19:59:14 -08:00
committed by Randell Dawson
parent 7913bf54cc
commit 7b0d1ab74a
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
guide/english/css/css-images/index.md
View File

@ -2,20 +2,20 @@
title: CSS Images title: CSS Images
--- ---
## CSS Images ## CSS Images
This helps in adding an image to a website. CSS can handle images like JPG, PNG or other raster format. There are two types images: plain images which are sometimes referenced with a url, and dynamically generated images which are generated by some element. This helps in adding an image to a website. CSS can handle images like JPG, PNG or other raster format. There are two types images: plain images which are sometimes referenced with a url, and dynamically generated images which are generated by some element.
#### Code Sample #### Code Sample
```<img src="picture.jpg" alt="Picture" width="100" height="100">``` ```<img src="picture.jpg" alt="Picture" width="100" height="100">```
* **src:** It consists of the value of the path to the required image</li> * **src:** It consists the value of the path to the required image.
* **alt:** If the image is not displayed then an alternate text can be displayed using alt attribute.</li> * **alt:** This is a text description of the image and is useful if the image cannot be viewed by a visitor. It also allows the image on your page to rank in image search results for search engines such as Google.
* **width:** This specifies a width for the image(can be percent or px or auto)</li> * **width:** This specifies a width for the image(can be percent or px or auto).
* **height:** This specifies a height for the image(can be percent or px or auto)</li> * **height:** This specifies a height for the image(can be percent or px or auto).
#### CSS Defaults #### CSS Defaults
The `img` element will be rendered by default in most browsers to be displayed as an inline-block display type unless specified otherwise. The `img` element will be rendered by default in most browsers to be displayed as an inline-block display type unless specified otherwise.
``` ```
img { img {
@ -43,7 +43,7 @@ It is advised to change any one parameter, either height or width, to get a prop
##### Datatypes ##### Datatypes
<a title="The <image> CSS data type represents a 2D image. There are two kinds of images: plain images, typically referenced using a URL, and dynamically-generated images, like those generated with <gradient> or element(). Images can be used with numerous CSS properties, such as background-image, border-image, content, list-style-image, and cursor." href="/en-US/docs/Web/CSS/image"><code>&lt;image&gt;</code></a> <a title="The <image> CSS data type represents a 2D image. There are two kinds of images: plain images, typically referenced using a URL, and dynamically-generated images, like those generated with <gradient> or element(). Images can be used with numerous CSS properties, such as background-image, border-image, content, list-style-image, and cursor." href="/en-US/docs/Web/CSS/image"><code>&lt;image&gt;</code></a>
<a title="The documentation about this has not yet been written; please consider contributing!" href="/en-US/docs/Web/CSS/uri"><code>&lt;uri&gt;</code></a> <a title="The documentation about this has not yet been written; please consider contributing!" href="/en-US/docs/Web/CSS/uri"><code>&lt;uri&gt;</code></a>
##### Image Sprites ##### Image Sprites
An image sprite is a collection of images put into a single image. An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests. A web page with many images can take a long time to load and generates multiple server requests.