html如何让背景图片不随放大而移动位置

2024-09-02

CSS 实现背景图尺寸不随浏览器缩放而变化

一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.huaban.com): 这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px分辨率的显示器浏览,不会出现背景不能充满屏幕的情况.换句话说,就是在各个分辨率的显示器下都能看到充满屏幕的背景图. 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背

使用javascript编写根据用户鼠标控制背景图片的移动

在一家VR公司做前端. 起初进入前端就是一种内心的直觉,创造更好的用户体验,让页面更加友好,当然最起初接手web项目还是为了完成毕业设计. 一个网上图书商城,虽然不大,但五脏都有毕竟开刀所以避免不了很多瑕疵,项目在....待我验证下好久没去看了!https://github.com/gitxiao5/html5/tree/master/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1. 今年三月份才开始正式的工作,工作了大半年了,前端一直都没有断过,即时有时还有其他的事情

HTML背景图片的相对位置设置

链接:https://jingyan.baidu.com/article/ff42efa9c22b11c19e220200.html 重点:background-attachment, background-position 方法/步骤首先我们需要插入一张图片,并且图片只出现一次,并设计图片出现的位置在左上角,可以按照如下代码来完成: <html> <head> <title>图片位置设置</title> <style type="

css网页中设置背景图片的方法详解

在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样注意:在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格.这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋.现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母.例子:给部分文字加背景颜色

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

app引导页(背景图片切换加各个页面动画效果)

前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦逼有木有,在这个过程中也学到了蛮多东西的,所以写一篇博客跟大家分享一下. 先看效果图: 1.显示三个页面的Activity 用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了view

制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要学习的可以去这里下载我的demo:http://pan.baidu.com/s/1qXeFR0g 开发这类效果的TableViewHeader一般是通过监听scrollViewDidScroll:代理方法知道contenOffset值的变化,从而通过这个值的变化调整头部背景图的大小或者其他图片的大小

Duilib技巧：背景图片平铺

贴图的描述方式有两种 // 1.aaa.jpg // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0' corner='0,0,0,0' // mask='#FF0000' fade='255' hole='false' xtiled='false' ytiled='false' 第一种是最简单的,加载图片文件并将整张图片拉伸铺满整个控件第二种既支持从文件中加载图片,也可以从资源中加载1

AppCanCSS背景图片的属性

最近在用AppCan框架技术做跨平台移动应用开发,碰到界面布局设计中图片平铺.拉伸效果. 我们用到的是CSS 3中Background-size属性. 网上查了下这个属性,小记下: 取值: background-size: auto || length || percentage || cover || contain 取值说明: 1.auto:此值为默认值,保持背景图片的原始高度和宽度: 2.length:此值设置具体的值,可以改变背景图片的大小: 3.percentage:此值为百分值,可以

background属性冲突导致的部分浏览器背景图片不显示问题

前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u3,基于webkit开发的,平时并没有用过,应该是在细节处理上加了一些优化功能. 说回问题,第一眼看觉得可能是不同尺寸屏幕导致某个元素高度超出了,结果并不是这样.找了一会儿,终于发现是那一块的背景图片没有显示.图片并没有报404,也没有被其他属性覆盖, 而且上下文中的背景图都能正常显示,唯独这个不显

css3 实现图片等比例放大与缩小

css3 实现图片等比例放大与缩小在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规定每张图片的大小为固定的宽度和高度,比如200px*200px这样的.我们这边使用的是背景图片来做的,但是如果直接使用 img标签这样引入图片貌似不行,因此我们目前只能使用背景图片来做.对于大一点的图片我们可以缩放的,但是对于很小很小的图片,我们把他们拉伸的话,可能会有点点模糊,但是一般的情况下是不

Android 编程下背景图片适配工具类

package cn.sunzn.util; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Matrix; /** * 处理背景图片的一些工具,如放大缩小... */ public class BgUtil { /** * 使背景图片适应手机屏幕分辨率 * * @param context

用css来写一个背景图片的切换

代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider </title> <style type="text/css"> /*字体效果*/ @import url("http://www.w3cplu

Swing编程---添加背景图片的方法

总结:看下我的运行图片.这个图片很重要.很能说明问题.它的frame就是一个小图片.就是背景.么手贱把它放大. 在微软的操作系统上,你放多大,窗口就有多大,你看到背景就成了小图片,就会误以为不是背景. package com.bc; //添加被背景图片 import javax.swing.JLabel; import javax.swing.JButton; import java.awt.Color; import java.awt.FlowLayout; import javax.swin

背景图片之background的用法

常用的background背景属性有: background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺重复方向background-attachment 设置或检索背景图像是随对象内容滚动还是固定的.background-position 设置或检索对象的背景图像位置. 背景图片自适应: 相应语法:background-size :[ <length> | <percentage> |

background 背景图片 --css3

background 1.设置背景平铺background-repeat round :图片会进行缩放后平铺space : 图片会进行平铺,中间留下空白空间注:当滚动行为设为fixed,round和space没有效果 2.设置滚动时的行为background-attachmentscroll:父元素滚动时,跟随滚动:子元素滚动时,不跟随滚动.背景图片跟随父元素滚动local:父元素滚动时,跟随滚动:子元素滚动时,跟随滚动.背景图片一直跟随滚动fixed:父元素滚动时,不跟随滚动:子元素滚动时,

CSS网页背景图片等比例占满整个页面的解决方案

想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用DIV来实现了 #bodycontainer { width:100%; height:100%; min-width:973px; min-heigth:584px; background-image:url("love.jpg"); background-repeat:no-repeat; background-size:cover; } 重点在于backgrou

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

在rem布局下使用背景图片以及sprite

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊这方面的东西. rem布局所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem;

navigationController 去掉背景图片、去掉底部线条

//去掉背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault]; //去掉底部线条 [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

img只显示图片一部分或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置部分代码:<style type="text/css">img {position:abs

html如何让背景图片不随放大而移动位置

热门专题