How to create a gradient background for an HTML pa

2019-02-10 17:27发布

站内问答 / HTML/CSS
866 5 6

I am in the process of learning HTML.

What is the best way to create a gradient background for an HTML page?

So far this is what I have as a background:

body style="background-color:Powderblue"

I know this is not a gradient.

5条回答
戒情不戒烟
2楼-- · 2019-02-10 18:02

It's not possible to make a gradient with HTML alone. There are new features in CSS3 which allow you to create a gradient, however these are not fully supported by all browsers.

If you'd like to read some more about CSS3 gradients, read this article

There is also a handy online tool which will create the CSS code to create a gradient of your specification, here.

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-02-10 18:05

Use this http://www.colorzilla.com/gradient-editor/

CSS should be applied in a separate stylesheet... never apply styling inline.

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
4楼-- · 2019-02-10 18:06

There are many online tools that create Gradients. Either you can use them or you can create your own

Simply check here: http://www.cssmatic.com/gradient-generator

Also you can create your own by this way

CSS

background-image: -webkit-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -moz-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -ms-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -o-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
5楼-- · 2019-02-10 18:08

This cannot be done in html but it can in css (specifically css3).

You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.

Here is a simple example on a div: http://jsfiddle.net/8fDte/

You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="PathToCss.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY class="MyGradientClass">

  </BODY>
</HTML>

CSS

This code can be generated by a css gradient generator like the one linked above.

.MyGradientClass
{
    height:200px;
     background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(113,61,62)),
        color-stop(0.63, rgb(147,92,93)),
        color-stop(0.82, rgb(177,120,121))
    );   
}​

Edit:

As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
6楼-- · 2019-02-10 18:10

Styling in external sheets is a much easier, faster and more efficient way to style your web pages especially if you have several pages that link to your style sheet(s). This allows you to change the entire styling of all of your pages at the same time with one line of code. It is ok however if you have a single page that you have up or if you need a simple page to look different by itself, inline styling is sufficient but not common. See below for quick example.

(inline styling for each page)

<!doctype html>
<html>
<head>
   <title>THIS WOULD GET AGGRAVATING IF DONE ON 10 PAGES!</title>
   <style="text/css">
      body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}
   </style>
</head>
<body>
</body>
</html>

....or it would b like this

   <!doctype html>
      <!doctype html>
<html>
<head>
   <title>THIS CHANGES SAME PARAMETERS ON 100 PAGES WITH SAME LINK INSTANTLY!</title>
   <link rel="stylesheet" href="/cssfolder/yourcssheet.css" />

</head>
<body>
</body>

and your "yourcssheet.css" style sheet would look like this

/*BEGINNING OF STYLESHEET, NO OTHER CODING NECESSARY BUT SOME MIGHT PUT @meta charset utf-8 AT THE TOP BUT IS NOT NEEDED TO FUNCTION*/

    body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}

/*END OF STYLESHEET*/

Now instead of going through every style on each individual page head, you can simply change it all with a simple external sheet all linked together by the following.

Hope this helps. jhawk2k14@gmail.com

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)