精华内容
下载资源
问答
  • 2021-12-07 17:31:13

    一、背景颜色

    bgcolor:设置背景色
    网页背景颜色的使用:bgcolor=“ ”

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>背景颜色和背景图片</title>
    	</head>
    	<body bgcolor='red' background="img/1.png">
    	</body>
    </html>
    

    二、背景图片

    background:设置背景图片
    网页背景图片的使用:background=“ ”


    三、图片

    img:设置图片
    这里的图片是指在网页上放置一个图片,而不是整个网页的背景图片,两者并不等同。

    相关知识:
    1、设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放。
    2、img标签就是图片标签。
    3、src属性就是图片的路径。
    4、width设置宽度,height设置高度。
    5、title设置鼠标悬停时显示的信息。
    6、alt设置图片加载失败时显示的提示信息。
    7、正常情况下采用<img> </img>,但如果两个img之间没有东西的时候,可以写成<img ? />

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>图片</title>
    	</head>
    	<body>
    		<img src='img/1.png' width='100px' title="我是百度图片哦" >
    	</body>
    </html>
    

    更多相关内容
  • web前端背景设置

    2017-11-08 15:34:35
    web前端背景设置,以及动态的添加和代码的实现过程
  • 作用:设置背景图片大小 语法:background-size: 宽度 高度 取值: 取值 场景 数字+px 简单方便,常用 百分比 相对于当前盒子自身的宽高百分比 contain 包含,将背景图片等比例缩放,直到不会超出盒子的...

    作用:设置背景图片大小

    语法:background-size: 宽度 高度

    取值:

    取值场景
    数字+px简单方便,常用
    百分比相对于当前盒子自身的宽高百分比
    contain包含,将背景图片等比例缩放,直到不会超出盒子的最大范围
    cover覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白

    原图效果
    在这里插入图片描述

    contain效果
    在这里插入图片描述

    如果图的宽或高与盒子的尺寸相同了,另一个方向会停止缩放,导致盒子可能会有留白

    cover效果
    在这里插入图片描述

    保证图片的宽和高与盒子的尺寸完全相同,有可能导致图片显示不全

    展开全文
  • 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; ...

    问题一:如何设置背景图铺满整个屏幕

    css代码:

    body {
        background-image: url("../img/bg.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    简写:

    body{
        background:url("../image/bg.jpg") no-repeat center center fixed;
        background-size:cover;
    }

    效果说明:当窗口页面合适时,图片铺满;但是窗口比例变化时,背景可能只显示原图中心一部分

    问题2:如何让背景随屏幕伸缩(背景图会变形) 

    css代码

    body{
        background: url("../img/LoginBG.jpg") ;
        background-size: 100% 100%;
    }

    效果图:

     

    展开全文
  • 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、总结

    在这里插入图片描述

    最后分享一句金句:

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

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

    展开全文
  • 在css文件中选择body进行设置背景 body{ background: url("image/A.jpeg") } 法3: 在head中设置css样式 <style> body{ background: url("image/A.jpeg") } </style> ...
  • 1、前端背景图自适应

    2022-03-05 15:08:00
    1、前端背景图自适应 如何实现前端背景图片自适应浏览器窗口大小,只需要添加如下CSS样式既可, background-image: url("../image/bcg.jpg"); background-repeat: no-repeat; background-size: cover; -webkit-...
  • 1.背景图片大小 很多时候我们在使用图片的时候,会发现图片和我们的盒子大小不匹配的情况。...当我们你使用背景图时,盒子太小,图片会被切割,如下: 这时大小属性就派上用了。 .picPart{ .
  • <!DOCTYPE html> <... <head> ...meta charset="UTF-8">...模糊化背景图</title> <style> body { background-image: url("image/bjt03.jpg"); background-repeat: no-repea
  • 主页设计布局是在网站的左上... 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片放到pic文件夹中,背景音乐放到music文件夹中。
  • _WEB前端开发ps画笔工具的快捷键是“B”;默认使用前景色绘图,通过设置后可以多种色彩一起绘制。ps的画笔分为了4类:常规画笔、干介质画笔、湿介质画笔、特殊效果画笔。html怎么设置背景图片全屏平铺?1、新建一个...
  • 将图片设置背景,那么先找背景素材,这个背景素材可以到各大图片网站找!那么为什么今天小编要讲这个呢?在做一个网页中,如果网页背景都是白色的,虽然看起来干净整洁,但是更加倾向于棺材板类的网站,死气沉沉的...
  • 1.如何设置标签的背景颜色 (1)在CSS中有一个background-color:属性值;,就是专门用来设置标签的背景颜色。 (2)取值:具体单词、RGB、RGBA、十六进制 例子: <style> .p1{ background-color: red; ...
  • 前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所...
  • 1.背景颜色:一般情况下背景颜色看不见,可以通过background-color设置颜色。 2.背景图片:(插入图片位置比较难调,一般使用背景图片)通过 background-image: url(图片地址); 设置背景图片,背景图片默认平铺。 ...
  • 使用css3的背景图引入后,后者不显示,查看DOM会发现丢失了图片地址。 解决方案 在引用时给地址两端加上引号,即由 style={{backgroundImage:`url(${recipe.menuImage})`}} 改为 style={{backgroundImage:`...
  • 首页采用div+js+css来实现四张港珠澳大桥背景图的引入和隔一定时间实现循环自动来回切换背景图,通过js设置切换间隔,每张图的停留时间。网站中央是内容,分别包含五大板块,每个版块由不同的div块组成,右上角是...
  • 代码实例如下: web前端学习交流扣qun:731771211 志同道合者进 #antzone{ width:309px; height:99px; } window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById(...
  • 1:大概效果如下 : 2:代码如下: 今世缘茶吧服务项目 今世缘茶吧--服务项目 咖啡:20元 茶 红茶:30元 绿茶 中国茶:55元 非洲茶:45元 牛奶:10元 联系人: 代安卡 联系地址: 北京工商大学小树林 邮政编码 ...
  • 首先来一个对比,图片本身尺寸是宽 1440px 的,在本地(我的电脑是 1366px 的)背景填充正常,但是使用响应式调到1920px后变了,仔细一检查,样式写的有些问题,background-size 的cover属性可以拉伸图片,我写的 ...
  • 【实例简介】 【实例截图】 【核心代码】 test ├── 3D场景.html ├── ASCII码3d旋转... 文字变换特效.html ├── 电流变形效果.html ├── 背景连线动画.html └── 蜂巢背景特效.html 2 directories, 28 files
  • 1.适用于但网页APP推广页面美化,WEB网页DIV层背景图循环向上滚动效果 2.此效果为静态HTML效果美化
  • Web前端——实现轮播

    千次阅读 2021-11-12 15:31:01
    小白总结一下最近学到的前端知识,实现轮播~~ 分两步: 第一步:在body中添加οnlοad=”show()”,onload事件是浏览器解析完页面之后就会自动触发的事件 <body onload=”show()”></body> 第二步:...
  • 我们在进行前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么CSS设置透明度的方法是什么呢? 本文就来给大家介绍用CSS设置透明度的两种方法(代码实例)。我们在未来使用CSS设置页面...
  • 如何设置背景图片的大小?

    千次阅读 2019-09-28 09:54:09
    background-size:auto; background-size:某某px; background-size:某某%; background-size:cover;...2、xxpx:自定义设置图片的大小,一般为成对出现例如 100px,50px,当设置一个值的时候,将其作为图片的宽度...
  • css怎么设置背景图片大小?

    千次阅读 2021-06-10 17:02:49
    我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。css可以使用background-size属性设置背景图片大小,background-size属性规定背景图像的...
  • java web项目中如何插入背景图片

    千次阅读 2021-03-04 07:35:25
    对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下:效果如下:图片就是不显示,后期我又加了,...
  • 之前在加前端背景时一直用<body background="xxx">的形式,但是用这种形式,背景会随着网页的布局大小而变化,显得不美观,例如: 这里就不能正常显示图片的尺寸了: 图片随着网页的大小而变化,很难看: ...
  • 3)content-box #以content实际内容来设置背景图 一个框一个图 .div1{ margin:100px; width:256px; height:256px; background: url(/img/web.png) no-repeat center center; background-size: 100...
  • background:url('image/csdn.jpg')"> /* 容器内容 */ 定义一个如背景为一张图片的div容器,但是背景显示却并不完整,这是因为还确少一个background-size的属性。 backgronud-size属性 规定背景图像的尺寸,对于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,200
精华内容 24,480
关键字:

web前端背景图怎么设置