web背景图

web 背景图片属性background和文本颜色属性text 千次阅读
2018-12-12 23:44:36
1.通过<body>元素中的background 属性来设定网页的背景图片。

语法格式如下：
```
<body background="URL">
```
background 属性的取值为URL地址，是可以从互联网上得到的资源的位置和访问方法的一种简洁表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL。因此，可以通过background 属性值指定的URL地址，找到被设置为网页背景的图片。

bgproperties是控制<body>元素背景的一个属性，当属性为fixed时，它将把背景图片冻结在浏览器窗口，背景图不会随着其他窗口内容而滚动。

2.通过<boay>元素中的text属性来设定网页文档的文本颜色。

语法格式如下
```
<body text="value">
```
更多相关内容
WEB网页DIV层背景图循环向上滚动效果
2022-02-17 17:36:39

1.适用于但网页APP推广页面美化，WEB网页DIV层背景图循环向上滚动效果 2.此效果为静态HTML效果美化

收起

Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写

千次阅读 2022-04-27 17:33:24

Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写

前言

持续总结输出中，今天分享的是Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写

1、背景颜色

background-color(bgc)

颜色取值:

关键字、rgb表示法、rgba表示法、十六进制…

代码参考:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 400px;
            height: 400px;
            /* background-color: beige; */
            /* background-color: #ccc; */
            /* 红绿蓝三原色, a是透明度0-1 */
            /* background-color: rgba(0, 0, 0, 0.5); */
            background-color: rgba(0, 0, 0, .5);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

注意点:

• 背景颜色默认值是透明 : rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2、背景图片

background-image(bgi)

代码参考:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: beige;
            background-image: url(./images/2.jpg);
        }
    </style>
</head>
<body>
    <div>内容文字</div>
</body>
</html>

注意点:

• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3、背景平铺

background-repeat(bgr)

属性名	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

代码参考:

repeat：（默认值）水平和垂直方向都平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: beige;
            background-image: url(./images/2.jpg);
            background-repeat: repeat; 
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

请添加图片描述

no-repeat ： 不平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: beige;
            background-image: url(./images/2.jpg);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

请添加图片描述

repeat-x： 沿着水平方向（x轴）平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: beige;
            background-image: url(./images/2.jpg);
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

请添加图片描述

repeat-y： 沿着垂直方向（y轴）平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: beige;
            background-image: url(./images/2.jpg);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

请添加图片描述

4、背景位置

background-position(bgp)

在这里插入图片描述

注意点:

• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
• 正数: 向右向下移动; 负数:向左向上移动
• 背景色和背景图只显示在盒子里面

代码参考:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: beige;
            background-image: url(./images/2.jpg);
            background-repeat: no-repeat;
            background-position: right 0;
            /* background-position: right bottom; */
            /* background-position: center center; */
            /* background-position: center; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            /* background-position: -50px -100px; */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

background-position: right 0;
请添加图片描述

background-position: right bottom;
请添加图片描述
background-position: center center;

background-position: center;
请添加图片描述
background-position: 50px 0;

请添加图片描述

background-position: 50px 100px;
请添加图片描述

background-position: -50px -100px;
请添加图片描述

5、背景相关属性连写

background(bg)

单个属性值的合写，取值之间以空格隔开

书写顺序: 推荐:background:color image repeat position

省略问题:
• 可以按照需求省略
• 特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background:url()

注意点:

• 如果需要设置单独的样式和连写
• 1.要么把单独的样式写在连写的下面
• 2.要么把单独的样式写在连写的里面

代码参考:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 不分先后顺序 背景色  背景图  背景图平铺  背景图位置 */
            /* background: beige url(./images/2.jpg) no-repeat center bottom; */
            /* 背景图位置如果是英文单词可以颠倒顺序 */
            background: beige url(./images/2.jpg) no-repeat bottom center ;

            /* 测试背景图位置如果是数值 不要颠倒顺序 */
            /* 水平50px, 垂直100px */
            /* background: pink url(./images/2.jpg) no-repeat 50px 100px; */
            background: beige url(./images/2.jpg) no-repeat 100px 50px;


        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6、img标签和背景图片的区别

需求:需要在网页中展示一张图片的效果?

方法一:直接写上img标签即可

• img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二:div标签 + 背景图片

• 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

7、总结

在这里插入图片描述

最后分享一句金句：

记住该记住的，忘记该忘记的。改变能改变的，接受不能改变的。—— ——《麦田里的守望者》

本次的分享就到这里了！！！请不要忘记点赞✌，收藏✌，加关注✌哦 ❤️ ❤️ ❤️

收起

展开全文

前端

html怎么设置背景图片全屏平铺？_WEB前端开发
千次阅读 2021-06-12 02:15:47

_WEB前端开发ps画笔工具的快捷键是“B”；默认使用前景色绘图，通过设置后可以多种色彩一起绘制。ps的画笔分为了4类：常规画笔、干介质画笔、湿介质画笔、特殊效果画笔。html怎么设置背景图片全屏平铺？1、新建一个...

ps画笔工具快捷键是什么？_WEB前端开发

ps画笔工具的快捷键是“B”；默认使用前景色绘图，通过设置后可以多种色彩一起绘制。ps的画笔分为了4类：常规画笔、干介质画笔、湿介质画笔、特殊效果画笔。

html怎么设置背景图片全屏平铺？

1、新建一个html文档。

2、设置一下HTML的框架，然后把图片设置在同一个文件夹里面。

3、加入，这样可以有样式设置。

4、因为背景设置在主体，所以还要定义为body{}。

5、background-image:url(图片)，这个是添加图片的意思。

ps怎么做立体折叠效果？_WEB前端开发

ps做立体折叠效果的方法：首先将图片放进文件里并进行调整；然后用“矩形选框工具”选定图片的区域，并依次点击【编辑-剪切-原位粘贴】；接着依次点击【编辑-变换-透视】，并点击【图层样式】添加【投影】；最后拉【线性渐变】，并调低【透明度】即可。

6、然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。

7、background-repeat:no-repeat;这样就可以不重复平铺。

8、background-repeat:repeat-y;这个指令是纵向平铺。

9、background-repeat:repeat;这样则是全屏平铺。

推荐教程：《HTML教程》

收起

展开全文
Web基础(从零开始)——CSS背景设置（颜色，图片，位置，背景图像固定）
千次阅读 2021-11-13 09:58:37

1.背景颜色：一般情况下背景颜色看不见，可以通过background-color设置颜色。 2.背景图片：（插入图片位置比较难调，一般使用背景图片）通过 background-image: url(图片地址); 设置背景图片，背景图片默认平铺。 ...

1.背景颜色：一般情况下背景颜色看不见，可以通过background-color设置颜色。

2.背景图片：（插入图片位置比较难调，一般使用背景图片）通过 background-image: url(图片地址); 设置背景图片，背景图片默认平铺。

设置背景平铺：background-repeat: repeat（平铺）|no-repeat（不平铺）|repeat-x（沿x轴平铺）|repeat-y（沿y轴平铺）;

3.背景图片位置：background-position:x y ;x坐标和y坐标，可以使用方位名词（top|center|bottom|left|right）或者精确单位

（1）参数是方位名词

1、则两个值的前后顺序无关例：left top和top left效果等价

2、如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

（2）参数是精确单位

1、参数值是精确坐标，第一个肯定是x坐标，第二个一定是y坐标（即前后顺序有影响）

2、如果只指定一个值，则为x坐标，另一个是垂直居中的。

（3）混合单位：如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

4.背景图像固定：background-attachment:scroll | fixed 属性设置背景图像是否固定或者随着页面的其余部分滚动。默认是scroll背景图像随对象内容滚动的，可以设置为fixed背景图像固定

5.背景色半透明：background:rgba(0,0,0,0.3);前三个数值分别对应rgb值，最后一个是alpha透明度，取值范围在0~1之间

收起

展开全文

css 前端 css3
web-页面body添加背景图片
万次阅读 2019-01-26 14:22:50

页面body添加背景图片背景图片存在static文件夹中 1、设置setting.py文件夹。 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] 2、在html文件中，加载static文件夹，加入第...

收起
在Eclipse中 Web项目插入背景图片
千次阅读 2020-06-30 08:51:23

标题在Eclipse中 Web项目插入背景图片将存放图片的文件夹放在WebContend文件夹内：在jsp中用CSS时：

收起
【Web前端】网页背景图设置技巧
万次阅读 多人点赞 2019-07-23 12:02:11

问题一：如何设置背景图铺满整个屏幕 css代码: body { background-image: url("../img/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; ...

收起
web前端入门到实战：背景颜色、背景图片、背景填充
万次阅读 2019-10-06 20:54:05

一、背景 1.如何设置标签的背景颜色（1）在CSS中有一个background-color：属性值；，就是专门用来设置标签的背景颜色。（2）取值：具体单词、RGB、RGBA、十六进制例子： <style> .p1{ background-...

收起

css html 前端前端开发
web前端学习（二）——HTML里的网页的背景、图片
千次阅读 2021-12-07 17:31:13

一、背景颜色 bgcolor：设置背景色网页背景颜色的使用：bgcolor=“ ” 二、背景图片 background：设置背景图片网页背景图片的使用：background=“ ” 三、图片这里的图片是指在网页上放置一个图片，而...

收起

前端 html
用IDEA在进行web开发时，在jsp页面中设置的背景图不显示？
千次阅读 2021-01-02 19:18:44

可以看到上面的截图里背景图是没有展现出来的二、思考过程一开始以为是图片路径不对，于是把img图片包放入了WEB-INF里，发现路径还是不对。于是上网查找解决方案，在网上查询了很久，它们说的问题都是路径不对的...

收起

过滤器 java jsp
CSS实现网页背景图片自适应全屏
千次阅读 2020-12-19 11:51:38

设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条...

收起
web前端背景图填充问题，小图怎样填充到大分辨率页面的问题
千次阅读 2019-03-09 17:12:52

首先来一个对比图，图片本身尺寸是宽 1440px 的，在本地（我的电脑是 1366px 的）背景填充正常，但是使用响应式调到1920px后变了，仔细一检查，样式写的有些问题，background-size 的cover属性可以拉伸图片，我写的 ...

收起
css怎么设置背景图片大小？
千次阅读 2021-06-10 17:02:49

我们现在经常会用到CSS，在编写过程中，会遇到CSS背景图像大小设置的问题，下面我们来看一下使用css设置背景图片大小的方法。css可以使用background-size属性设置背景图片大小，background-size属性规定背景图像的...

收起
html背景图片怎么设置平铺方式
千次阅读 2021-06-19 01:20:38

在html中，可利用background-repeat属性来设置背景图片的平铺方式；当属性值设置为“repeat”时可向垂直和水平方向平铺，“repeat-x”时可水平平铺，“repeat-y”时可垂直平铺，“no-repeat”时不平铺。本教程操作...

收起
html 如何让背景图片充满全图，就是拉伸
千次阅读 2020-12-19 11:51:39

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超...

收起
html怎么设置背景图片全屏平铺？
千次阅读 2021-06-09 14:37:38

4、因为背景设置在主体，所以还要定义为body{}。5、background-image:url(图片)，这个是添加图片的意思。6、然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。7、background...

收起
关于网页背景图怎样自动适应屏幕大小
2021-12-04 16:18:10

有时候写网页想添加一些背景图，但是图的尺寸并不能适应每个屏幕。从而导致一个网页重复多张图。这样很不好看。解决方法：使用一个style标签 <style> .background_{ background:url("背景图路径") no-...

收起

webview css wpf html
java web项目中如何插入背景图片
千次阅读 2021-03-04 07:35:25

对于java可视化界面插入背景图片这个倒是轻而易举，只需要background-inage:url(图片路径就行)，而对于与web项目中，我开始时也是采用这种方法，但是不尽然，代码如下：效果如下：图片就是不显示，后期我又加了，...

收起
css 如何在一个背景图片的中间添加文字呢？
千次阅读 2021-06-11 18:24:56

摘要：下文讲述使用css代码在背景图片的中间添加文字的方法分享，如下所示；实现思路:1.定义一个div，并放入背景图片，设置其内部元素水平垂直居中2.定义一个子div,并放入文字信息通过以上两个步骤，即可实现背景...

收起
解决移动端web页面整个背景图横向滚动问题
2018-03-05 13:38:46

加上overflow: hidden;

收起
如何设置背景图片的大小?
千次阅读 2019-09-28 09:54:09

background-size:auto; background-size:某某px; background-size:某某%;...4、cover：覆盖，用背景图等比例缩放填满整个容器。（推荐使用） 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

收起

前端
WEB网页如何让背景图片跟随可视窗口自适应大小
千次阅读 2017-06-15 21:29:00

HTML代码 <body id="body"> <div class="info-wrapper"> <div class="content"> </div> </div> </div> CSS代码 body{ 　font-size: 16px;...

收起
java web 插入图片 / 背景
千次阅读 2020-11-19 18:02:59

CSS设置背景填充自适应全屏例： Insert title here Hello 若只是普通的插入图片： /image/cat1.jpg> 图片也可滚动 /image/cat1.jpg> 例一个动态壁纸 Starfield Welcome

收起
HTML/设置网页背景图片+背景透明度设置
千次阅读 2021-04-19 23:01:31

HTML文件代码 <!DOCTYPE html> <html> <head> <head> <body "> <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%">...

收起
3种CSS实现背景图片全屏铺满自适应的方式
千次阅读 2021-12-21 11:55:58

3）给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。 css body标签的样式如下： body...

收起

css html css3
如何创建背景图片并在其上添加文字
千次阅读 2021-06-24 08:21:05

我曾尝试在导航栏下面的容器内创建一个div，但似乎在背后的文字背后放置了白色背景......您可以在此处看到我的代码：JSFiddle：my code。或者是如下：如何创建背景图片并在其上添加文字CSSbody {margin-top: 50px; /...

收起
WEB前端代码：边框阴影、边框图片、背景样式、文本样式、字体样式
千次阅读 2019-07-16 22:32:46

3)content-box #以content实际内容来设置背景图 一个框一个图 .div1{ margin:100px; width:256px; height:256px; background: url(/img/web.png) no-repeat center center; background-size: 100...

收起
1_web_设置全屏背景
千次阅读 2017-10-03 22:00:31

web_设置全屏背景第一次写web的博客,以后博客里就会出现各种各样的博客了希望自己的技术能够更上一层楼登鹳雀楼王之涣白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 ...

收起

css background
绿色大图背景博客模板_绿色大图博客导航白色 web20.zip
2022-02-17 09:46:48

绿色大图背景博客模板_绿色大图博客导航白色 web20.zip绿色大图背景博客模板_绿色大图博客导航白色 web20.zip

收起