精华内容
下载资源
问答
  • 前端背景图放置
    千次阅读
    2021-02-05 06:39:00

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    css怎样设置背景图片?

    css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。

    下面看看background可以设置的属性:background-color: 规定要使用的背景颜色。

    background-position: 规定背景图像的位置。

    background-size: 规定背景图片的尺寸。

    background-repeat :规定如何重复背景图像。

    background-origin :规定背景图片的定位区域。

    background-clip: 规定背景的绘制区域。

    background-attachment: 规定背景图像是否固定或者随着页面的其余部分滚动。

    background-image :规定要使用的背景图像。

    可以看出background-image属性就是给html页面设置背景图片的属性,下面看看它的用法background-image:url(1.jpg);

    这样在url()里给出图片的路径,就可以给div盒子设置一个背景图片;看似简单,但有一点要注意,设置背景图片的盒子必须要有实质的宽度与高度,这样才可以让背景图片在显示屏上显示。

    上面的这些background属性如果一个一个的设置是不是感到繁琐,其实有些属性是可以放在一起设置的,这样的css背景表达可以节约且优化了css文件代码

    更多相关内容
  • 前端游戏开发贴吧游戏前端...2.需要将给出的一张背景图片和一张靠repeat形成的图片结合形成背景图—针对第一个问题:CSS3 background-size图片自适应background-size属性和background-origin属性、background-cli...

    前端游戏开发贴吧

    游戏前端开发

    游戏开发流程 策划美术前端后端

    昨天在切图时遇到如下两个问题:

    1.需要背景图片无论浏览器大小如何缩放,背景图片始终宽度百分百显示。

    2.需要将给出的一张背景图片和一张靠repeat形成的图片结合形成背景图—

    针对第一个问题:

    CSS3 background-size图片自适应

    background-size属性和background-origin属性、background-clip属性一 样,也是CSS3对于background新增加的属性。它的作用是指定背景图片的大小,比如:对于一个div块,我们需要为它添加一张图片作为背景,然 而图片大小并非总能尽如人意,但我们又不想使用background-repeat属性让背景平铺,那么这时我们就可以使用background- size属性使图片放大或者是缩小来适应div块,当然这也可能会造成背景图的失真。

    下面我们就先从它的语法说起吧:

    background-size :[ | | auto ]{1,2} | cover | contain ;

    这 个属性有2个可选值,第1个值用于指定背景图的宽width,第2个值用于指定背景图的高height,如果只设定1个值,则第2个值默认为自动 auto。这两个值可取数字(单位为px)也可以取百分比,当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的 位置决定,当然还可以通过cover和contain来对图片进行伸缩。

    cover:用于等比放大背景图

    contain:用于等比缩小背景图(背景图需大于块,否则背景图仍会被放大以适应块)

    auto:默认值

    针对第二个问题:

    当给了body设置了背景图片后,再新建一个div设置背景图片,并将这个设置为–postion:absolute;z-index:1,从而使它和body的背景图片不在同一个层级上,从而都能显示出来。

    前端游戏开发笔试题

    引擎游戏前端开发语言

    展开全文
  • body 的背景图设置第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放background: url(imgs/1.jpg)no-repeat;background-position:center 0; 背景图的定位原点,由于body高不确定background-attachment:fixed;...

    body 的背景图设置

    第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放

    background: url(imgs/1.jpg)no-repeat;

    background-position:center 0; 背景图的定位原点,由于body高不确定

    background-attachment:fixed; 背景图片保持固定,不会随页面滚动而滚动

    第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变

    首先给html 设置 height:100%;

    给body设置

    background: url(imgs/1.jpg) no-repeat;

    background-size: 100% 100%; 若background-size 值为cover, 此情况下是只要有一边碰到窗口边,就停止, 这种情况下 ,背景图不会等比缩放

    同样道理,

    body中的元素若想宽高100%,

    第一种方式:

    先给html设置height:100%; 再给该元素设置width:100%;height:100%;

    第二种方式: 给width/height 设置100% 的同时,也要设置position:fixed;

    页面若要用到input, 要去掉其默认的 outline 和border, 若使用默认的border,后面js修改时, 第一次交互,会出现微小的像素偏移,建议重置

    这一句放在

    中,修改该html网页title中小图标

    html中将文字纵向显

    对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求

    此时需要在该css中加上

    word-wrap:break-word; word-break:normal;这个两句 可实现标点换行的,同时整体纵向显示

    writing-mode:设置对象书写方向,有两个值,

    1.lr-tb:从左向右,从上往下 ,

    2. tb-rl:从上往下,从右向左

    运行代码发现,IE显示正常,火狐、谷歌浏览器却不支持,所以不建议使用writing-mode属性。我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我并在后台私信我:前端,即可免费获取。

    展开全文
  • 0x00 前言最近接到个关于移动端适配的任务,因为希望复用 PC 端的数据所以有些东西实现起来比较麻烦,比如...原谅我苍白的文字描述,下面直接给图:0x01 如何获取 CSS 设置背景图的大小?清楚需求后决定将图片以 CSS...

    0x00 前言

    最近接到个关于移动端适配的任务,因为希望复用 PC 端的数据所以有些东西实现起来比较麻烦,比如现在讨论的显示图片中心区域。原需求是这样的:在图片比例和要显示的容器比例一致时直接按比例缩放就好,但是如果图片比例和容器比例不一致,这时候就要以容器的比例为准,显示图片的中心区域。原谅我苍白的文字描述,下面直接给图:

    0x01 如何获取 CSS 设置背景图的大小?

    清楚需求后决定将图片以 CSS 的背景图显示,因为依稀记得 background-position 和 background-size 可以设置图片显示的位置和图片缩放比例,因为图片是通过设置 style 显示的,那么现在的问题是怎么能拿到图片的原始大小呢?我们知道 img 元素有 naturalWidth 和 naturalHeight 属性代表原始图片宽、高。那么现在我们就可以通过 js 获取 CSS 中图片的 url 然后通过 new Image() 并设置 src 不就能通过 naturalWidth 和 naturalHeight 的到原始图片的宽高了嘛!示例代码如下(依赖 zepto.js):(function ($){

    // 获取 CSS 背景图片 url 的正则表达式

    var urlRegex = /url\(['"]*(.*?)['"]*\)/g;

    $.fn.getBackgroundSize = function (callback){

    this.each(function (){

    // 背景图片元素

    var img = $(this);

    // new 一个 image 元素作为模板

    var tpl = new Image();

    // 根据正则获取 css 背景图 url 并设置为模板图片的 src

    tpl.src = img.css('background-image').replace(urlRegex, '$1');

    // 待图片加载完毕后执行回调函数,传递背景图片元素对象,图片的原宽度和原高度

    tpl.onload = function (){

    callback(img, tpl.naturalWidth, tpl.naturalHeight);

    tpl = null;

    }

    })

    return this;

    }

    })(Zepto);

    使用方法:$('.pic').getBackgroundSize(function(img, width, height){

    console.log(img, width, height);

    }

    0x02 如何只显示图片中心区域

    现在我们已经知道原图的宽高和容器的宽高了,然后我们可以分别计算出它们的宽高比,通过比较宽高比我们就可以知道如何设置 background-position 的值了。下面先放代码:$('.pic').getBackgroundSize(function(img, width, height){

    // 容器宽高

    boxHeight = img.height();

    boxWidth = img.width();

    // 容器宽高比

    boxScale = boxWidth / boxHeight;

    // 图片宽高比

    imgScale = width / height;

    if (imgScale == boxScale) { // 宽高比一致

    img.css('background-position', '0 0');

    img.css('background-size', '100% 100%');

    } else if (imgScale > boxScale) { // 图片过宽情况

    // 计算按高度缩放后图片宽度

    width = width * (boxHeight / height);

    var offset = String(-(width - boxWidth) / 2);

    // 向左移 (图片宽度减容器宽度 ÷ 2) 单位,即显示为图片中心区域

    img.css('background-position', offset + 'px');

    } else { // 图片过高情况

    // 计算按宽度缩放后图片高度

    height = height * (boxWidth / width);

    // 向下移 (图片高度减容器高度 ÷ 2) 单位,即显示为图片中心区域

    var offset = String(-(height - boxHeight) / 2);

    img.css('background-position', '0 ' + offset + 'px');

    }

    });

    在图片宽高比与容器一致时 background-position 直接设置为 0 0,background-size 设置为 100% 100% 就好了。但是在不一致时 background-size 需要设置为 cover ,因为在图片过宽或过高时设为 cover 会超出容器并因此隐藏起来,这时设置 background-position 才是有效的。不过 background-position 不能直接是原始图片的大小而是经过 background-size 缩放后的大小,所以才会有 width = width * (boxHeight / height); 这样一句计算缩放后宽度的语句。

    0x03 总结

    上面的代码就基本能够满足需求了,但是这种方式仍然不是完美的解决方案啊。因为图片的中心也未必是最需要展示的内容啊,在一些既不符合比例的图片里还是不会显示重要内容的。还是觉得直接能有符合移动端比例的图比较合适,不过谁叫是老项目呢,要把以前的内容和方式都改了也是很麻烦的说。毕竟 “Done is better than perfect !”,先把砖搬完再说吧~

    展开全文
  • 在css文件中选择body进行设置背景 body{ background: url("image/A.jpeg") } 法3: 在head中设置css样式 <style> body{ background: url("image/A.jpeg") } </style> ...
  • 前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。css background属性就是专门设置背景的属性,可以设置背景色,...
  • //这个是对所有的背景图片尺寸进行控制的,注意是所有的背景图片 background-position:8px 95px; //对图片所在DIV的位置进行控制,也是所有的背景图片 } 但是如果放入多张怎么才能对这些放入的图片单个精确定位呢?...
  • 对background-size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放。详情可见css3 background。对background-position很自然的以为百分比是根据父元素宽度计算的,但background-po...
  • 代码实例如下: web前端学习交流扣qun:731771211 志同道合者进 #antzone{ width:309px; height:99px; } window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById(...
  • 背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的,但是。。。。。。1.如何将背景图像完美地适合视口body {background-image: url('...
  • 背景颜色一致的图标放置在一起 如果背景颜色不一样, 最好分为两个或多个图片放置, 特别是背景颜色相近的, 很容易混淆. C. 将相同栏目的图标放置在一起 这样可以少写一些 CSS 代码. 设置一个 background, 再在每个...
  • CSS 背景图片排版

    千次阅读 2020-12-24 04:13:10
    使用 CSS 套用背景图片到元素中可能是您前端设计过程中最常用到的功能。background 有非常丰富的属性,让我们可以针对不同的需求做设定。同时一个元素可以具有多张背景图片。如果您想要套用多张图片您可以直接在 ...
  • 一、背景颜色 bgcolor:设置背景色 网页背景颜色的使用:bgcolor=“ ” 二、背景图片 background:设置背景图片 ...这里的图片是指在网页上放置一个图片,而不是整个网页的背景图片,两者并不等同。 ...
  • 我们可以通过CSS来在任何HTML元素中放置背景图片。这主要是通过CSS background-image属性来完成的。body { background-image: url("images/gradient.gif"); }我们不能够使用 src 属性来制作背景图片,这是一个HTML...
  • 很多时候前端展示图片,会限制图片或图片容器的宽高。这样会导致某些图片长宽比例失调,即图片拉伸。但如果不限制图片或容器宽高,大随机排列也很影响观感。 这种情况下我们可以使用 object-fit属性来实现。 ...
  • HTML+CSS实现背景图片铺满页面的方法

    千次阅读 多人点赞 2021-06-12 15:59:06
    前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面,我在之前的前端学习中也逐渐了解到一些方法和问题的解决方式,在下面我为大家的整理好了,仅供参考学习。 一、DIV中添加背景背景图片 代码...
  • MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性。先给大家看下演示 demo 的运行,后面将围绕项目的制作过程,依次来展示导航栏、图片...
  • 每当重大节日期间,各大主流网站首页会披上节日的盛装,设计者一般会使用大幅背景图片来获得更好的视觉冲击效果,当然,也要考虑到有些用户不习惯这大背景图,那么在背景图放置“关闭”按钮是有必要的,用户只要...
  • WEB前端-CSS背景和列表

    2021-02-05 06:38:59
    一、CSS背景1、background-color:设置元素的背景颜色background-color:颜色 | transparent说明:transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值颜色值(颜色名 | RGB | 十六进制)背景区...
  • 我正在尝试将背景图像添加到已具有背景颜色的按钮(或具有相同类的链接).该按钮本身看起来很棒,但我试图这样做,以便如果我添加某个类,将调整填充并显示背景图像,但图像不显示.这是CSS / HTML:.button {padding: 10px...
  • css如何实现文字在背景图片之上?本篇文章小编给大家分享一下css实现文字在背景图片之上代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。效果:非常感谢!您...
  • html – 将背景图像保持在底部

    千次阅读 2021-06-14 00:32:48
    我的目标是坚持底部的背景并显示在其他所有背后(因此低z-index).我有顶部的下面的代码(有一个中间,这只是块颜色,只是添加到正文): .background { position: absolute; top: 0; width: 100%; height: 600px; ...
  • 或者是rgb函数或者是预定义的单词 7.2背景图片 用于网页logo,或大的背景图片,或精灵的设置,原因是其控制位置非常方便 7.2.1设置背景图片语法 background-image : url("相对地址或者是绝对地址") 7.2.2背景图片...
  • css如何设置背景图片?

    千次阅读 2021-06-11 06:55:19
    前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片。css可以通过background-image属性来设置背景图片,background-...
  • css样式怎么插入背景图片?

    千次阅读 2021-08-05 00:31:58
    在css中,给html元素添加背景图,主要通过background-image属性来设置。background-image属性设置一个元素的背景图像;默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。css样式怎么插入背景...
  • background-image 属性的默认值是 none,表示背景上没有放置任何图像。 3、背景重复 background-repeat属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别...
  • 使用canvas在前端实现图片合成

    万次阅读 2018-02-26 09:56:50
    看着总结的不错,我也就拿来主义了,做个记录,侵权必删图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。随着HTML5发展和现代浏览器的...这里通过举个例子,演示如何在前端实现...
  • css如何设置网页背景图片?

    千次阅读 2021-06-10 12:40:09
    前端开发过程中,为了页面的美观,往往都会给html网页添加背景图片。那么如何在html网页中利用css设置背景图片?下面本篇文章就给大家介绍css设置网页背景图片的方法,希望对大家有所帮助。在CSS中,可以使用...
  • 原标题:前端程序员需了解的css背景如何设置?css知识点之背景主要学习内容:背景背景图像背景重复背景定位背景关联1、背景色background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。例:这条规则...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,058
精华内容 5,623
关键字:

前端背景图放置