首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将图像源设置为div/img背景图像,使用Javascript而不是Jquery?

要将图像源设置为div/img的背景图像,可以使用JavaScript来实现,而不依赖于jQuery。下面是实现的步骤:

  1. 获取目标div元素的引用。可以使用document.getElementById()方法或其他选择器方法来获取目标div元素的引用。例如,如果目标div的id为"myDiv",可以使用以下代码获取引用:
代码语言:txt
复制
var myDiv = document.getElementById("myDiv");
  1. 创建一个新的Image对象,并设置其src属性为图像的URL。可以使用new Image()来创建一个新的Image对象,并将其src属性设置为图像的URL。例如,如果图像的URL为"image.jpg",可以使用以下代码创建Image对象:
代码语言:txt
复制
var image = new Image();
image.src = "image.jpg";
  1. 等待图像加载完成。为了确保图像已加载完成,可以使用Image对象的onload事件。可以将一个回调函数分配给onload事件,以在图像加载完成后执行所需的操作。例如,可以使用以下代码等待图像加载完成:
代码语言:txt
复制
image.onload = function() {
  // 在图像加载完成后执行所需的操作
};
  1. 将图像设置为div/img的背景图像。在图像加载完成后,可以将其设置为div/img的背景图像。可以使用目标div元素的style属性来设置背景图像。例如,可以使用以下代码将图像设置为div的背景图像:
代码语言:txt
复制
myDiv.style.backgroundImage = "url('" + image.src + "')";

完整的JavaScript代码如下所示:

代码语言:txt
复制
var myDiv = document.getElementById("myDiv");
var image = new Image();
image.src = "image.jpg";
image.onload = function() {
  myDiv.style.backgroundImage = "url('" + image.src + "')";
};

这样,通过JavaScript就可以将图像源设置为div/img的背景图像,而不依赖于jQuery。请注意,这只是一种实现方式,具体的实现可能因项目需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

巧用 SVG 滤镜还能制作表情包?

scale 表示新得到的图像的扭曲程度,这个值越大,图像越加扭曲不可识别。...通过设置一个非常大初始值,我们可以完全将输入的任何图像粒子化,看看这个 Demo: <svg viewBox="0 0...background: url(image.jpeg) } .fractal { filter: url(#fractal); } 左边<em>为</em>正常的<em>图像</em>,右边<em>为</em>作用了<em>设置</em>了 SVG 滤镜效果的<em>图像</em>...但是点击事件,由于 SVG Animate 标签的一些限制,需要借助一些 <em>Javascript</em> 代码,这里借用 <em>JQuery</em> 简单做个示意。...通过动态的改变滤镜的参数和图片的透明度,当然,也需要借助一些 <em>JavaScript</em> 代码,完整的代码就不贴了(与上述 DEMO 非常类似),直接上效果图: ? 是<em>不是</em>非常类似灭霸把人物消失的效果?

1.1K10

Fluid -11- 封面视频背景顺滑加载

当前问题 当前问题为背景图像加载较快,视频稍慢 导致背景加载时会有先出现图像,再覆盖另一个视频的尴尬场景 解决思路 放弃图像加载 放弃图像加载是一种解决方案,这样就只会加载视频,没有图像的闪动 但手机端需要加载图像...,不能放弃图像背景 更重要的原因是图像加载快,用户可以更早地感受到网页在加载 因此不能放弃加载图像 加载更小的视频第一帧图像 又需要图像,同时又让视频覆盖起来顺滑 于是就有了使用视频第一帧图像作为背景图像加载的思路...实现思路 实现思路在加载视频路径json时顺带加载相应的第一帧图像 动态替换原始背景的 style background 链接地址,实现顺滑加载 该方案不会影响手机端的原始背景图像正常加载 解决方案...实现动态背景视频加载 参考 Fluid -2- 随机视频背景切换 获取视频图像第一帧 获取视频第一帧:Python 从视频中提取图像 调整保存图像的质量:Python 图像保存质量设置 保存质量可以低一些...`data-default-color-scheme=${colorSchema}` : '' %>> <script type="text/<em>javascript</em>" src="/vvd_js/<em>jquery</em>.js

80120

前端特效开发 | JS实现聚光灯看图效果

实现的原理分析 2.1 结构与样式搭建 为了实现图片的的聚光效果,使用了ul>li来嵌套图片的结构,并且采用的是浮动布局,让多个列表项并排在一起;然后为页面的body增加黑色的背景,以期来增加聚光时的高亮状态...之后借助样式设置方法.css(),列表项的每个列表设置当前图片的大小,使用对象.属性的方式取得前面对象中存储的值。...ul li').find('img').width(), imgHeight : $('.spotlight ul li').find('img').height() }; // 将列表项的宽度和高度设置图像相同...li> var spotlight = {...' : 1 }); // 获取其他列表项,并更改其中的图像的不透明度我们在Spotlight对象中设置的一个 $(this).siblings

4.3K50

让图片完美适应:掌握 CSS 的object-fit与object-position

免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验 在CSS中,我们可以使用 background-size 和background-position属性背景图像设置大小和位置...在过去,我们要么在图像编辑器中裁剪图像,要么通过设置宽度/或高度约束来调整图像大小(这不是一个完美的选择),或者执行某种复杂的裁剪,或者可能转而使用背景图像(如果图像不仅仅是为了装饰的话)。...如果我们使用背景图像,我们可以设置类似background-size: cover,背景图像将被限制在容器的区域内。...但实际上并不完全如此,因为这样会使图像定位到左边,不是居中,这是object-fit的默认设置。结合object-position,object-fit图像在容器内的定位提供了更多的选项。...结果与图像设置宽度和高度 100% 并包含在一个设置 300px 乘300px 的 div 中的结果相同。

27310

每个程序员都会的 35 个 jQuery 小技巧

id=XY> }); 返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,不需要使用其他插件。...添加这个简单的代码可以节省很多麻烦: $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你的网站没有破碎的图像链接...但是如果你希望元素显示时使用第一种效果,消失时使用第二种效果,则可以这么做: // Fade $('.btn').click(function () { $('.element').fadeToggle...高度相同 有时你需要让两个 div 高度相同,不管它们里面的内容多少。...height() > height) { height = $(this).height(); } }); $columns.height(height); 这段代码会循环一组元素,并设置它们的高度元素中的最大高

4.4K10

学习 canvas 的 globalCompositeOperation 做出的神奇效果

定义 globalCompositeOperation 属性设置或返回如何将一个(新的)图像绘制到目标(已有)的图像上。 图像 = 您打算放置到画布上的绘图。...只有源图像外的目标图像部分会被显示,图像是透明的。 lighter 显示图像 + 目标图像。 copy 显示图像。忽略目标图像。 xor 使用异或操作对图像与目标图像进行组合。...实现思路 在一个 canvas 上先画出黑白色的图片,然后设置背景是一张彩色的图片,鼠标点击时,设置 canvas 的 globalCompositeOperation 属性值 destination-out...刮刮卡效果实现的思路: 一个 canvas 上先画一层灰色,然后设置canvas的背景图,设置 canvas 的 globalCompositeOperation属性值 destination-out...总结 文章中的效果主要是使用 globalCompositeOperation属性取值 destination-out ,取值其他值的时候,同样也是可以制作出各种效果的,大家也可以发挥自己的想象力

1.4K20

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

Lazy Load 插件原理 修改目标 img 的 src 属性 orginal 属性,从而中断图片的加载。...你可以使用以下代码,加载这几个文件: <script src="<em>jquery</em>.lazyload.js...我们定义了这样一个结构,那么网页中,就不会加载<em>源</em><em>图像</em>了。只有当 <em>Javascript</em> 执行,才会显示这个<em>源</em><em>图像</em>。...你可以<em>使用</em>event属性,<em>设置</em>你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载<em>图像</em>。...如果我们需要用它加载不可见<em>图像</em>,我们需要将 skip_invisible <em>设置</em><em>为</em> false $("img.lazy").lazyload({ skip_invisible : false }); --

2.7K10

Fluid -2- 随机视频背景切换

文件收集视频背景链接 当开启视频背景时,创建div,idbanner_video_insert js 读取 json 文件,创建视频控件语句,加入到创建的div中,实现视频显示,覆盖图片背景 动态监控窗口变化...,适时调整视频属性,使得任意窗口大小可以全屏显示视频 识别是否是手机端访问,手机端访问改为使用图像背景 修改方法 配置文件修改 在主题配置文件中修改 首页 Home Page #-----------...: true 引入 jquery.js 为了 读取json 需要加载jquery.js 保险起见,我下载了最新的 jquery.js 放在了 fluid/source/js 文件夹中 可以在代码中使用... 加载 创建视频url json 例如我的,文件在fluid/source..."> 加入核心模板代码 在 行之后 <% if(banner_video

1.5K20

全栈之前端 | 9.CSS3基础知识之图像元素样式学习

background-image 属性: 一个元素设置单个或多个背景图像 background-repeat 属性: 设置背景图像重复方式 background-size 属性: 设置背景图像大小 background-clip...例如:下述示例中有一个两行两列的网格容器,里面所有的div元素有自己的背景色,被拉伸到充满了行和列,默认的图像并未被拉伸,此时设置 img 标签的 width、height 属性100%来拉伸。...属性 - 设置背景图像初始位置 描述:此属性每一个背景图片设置初始位置,其位置是相对于由 background-origin 定义的位置图层的。...语法参数: /* 关键 属性值 */ background-attachment: scroll; /* 背景相对于元素本身固定,不是随着它的内容滚动(对元素边框是有效的)。...,若元素拥有滚动机制,背景将会随着元素的内容滚动 */ 示例演示: 1.fixed 横向是固定的,不会随着元素内容滚动, scroll 相对于元素本身固定,不是随着它的内容滚动

16710

面试简书(五)

byte的图片压缩成base64 针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速.当向canvas发出绘画命令时,浏览器直接将指令发到图形加速器不需要开发者更多的干预...) 方法二(div 包着 img): img { width: auto; height: auto; max-width: 100%; max-height: 100%; } 如果图片背景图片 style...的各个属性 length设置背景图像的高度和宽度。...第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置 "auto"。percentage以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。...如果只设置一个值,则第二个值会被设置 "auto"。cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。

1.1K10

程序员都会的 35 个 jQuery 小技巧

id=XY> }); 11.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,不需要使用其他插件。...14.自动修改破损图像 如果你碰巧在你的网站上发现了破碎的图像链接,你可以用一个不易被替换的图像来代替它们。...但是如果你希望元素显示时使用第一种效果,消失时使用第二种效果,则可以这么做: // Fade $('.btn').click(function () {   $('.element').fadeToggle...高度相同 有时你需要让两个 div 高度相同,不管它们里面的内容多少。...() > height) {     height = $(this).height();   } }); $columns.height(height); 这段代码会循环一组元素,并设置它们的高度元素中的最大高

2.6K00

看不完的那种!前端170面试题+答案学习整理(良心制作)

27.如何用原生JavaScript实现jquery的ready方法 $(document).ready()在dom绘制完毕后就执行,不必等到页面加载完毕。...42.jQuery中有哪几种常见的选择器 基本选择器;层次选择器;过滤选择器;属性选择器;子元素选择器;表单选择器;内容选择器;可见选择器 43.使用jQuery将页面上所有元素边框设置2px宽的虚线...49.如何在单击一个按钮时使用jQuery隐藏一副图片 $('.demo-img').click(function() { $('.img').hide(); }); 50....alt是图片指定替代文字的属性 alt是在中指定的属性标签,表示图像。 正如我写替代文本一样,它用于需要文本不是图像的情况。...imgdisplay:block,或者设置vertical-align属性vertical-align:top/bottom/middle/text-bottom 158.如何让文本与文本输入框对齐

11.4K50

收集的35个 jQuery 小技巧代码片段,可以帮你快速开发.

id=XY> }); 11.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,不需要使用其他插件 // Back to top $('a.top')....自动修改破损图像 如果你碰巧在你的网站上发现了破碎的图像链接,你可以用一个不易被替换的图像来代替它们。...但是如果你希望元素显示时使用第一种效果,消失时使用第二种效果,则可以这么做: // Fade $('.btn').click(function () { $('.element').fadeToggle...高度相同 有时你需要让两个 div 高度相同,不管它们里面的内容多少。...() > height) { height = $(this).height(); } }); $columns.height(height); 这段代码会循环一组元素,并设置它们的高度元素中的最大高

5.4K20

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

实现一个背景图像轮播效果,每隔一段时间切换一张背景图。 使用CSS 3D变换来创建一个具有多个面的卡片效果。...实现一个背景图像轮播效果,每隔一段时间切换一张背景图。 使用CSS 3D变换来创建一个具有多个面的卡片效果。...)"> 步骤 3:CSS 样式 使用CSS来设计网页的样式,包括背景图、按钮、卡片等的样式。...设置背景图像适应屏幕,保持纵横比 */ background-position: -55px; transform-origin: 0 0;...JavaScript 动画的实现 JavaScript是一种编程语言,可以用于网页添加交互性和动画效果。在我们的项目中,JavaScript用于实现背景图像轮播和卡片翻转效果。

13710

一些好用的jquery技巧

2、预加载图像 如果你的网页要使用大量开始不可见的(例如,悬停的)图像,那么可以预加载这些图像: $.preloadImages = function () { for (var i = 0; i <...', 'img/hover-off.png'); 3、检查图像是否加载 有时为了继续脚本,你可能需要检查图像是否全部加载完毕: $('img').load(function () { console.log...10、让两个div高度相同 有时候,你需要让两个div无论包含什么内容都拥有相同的高度: $('.div').css('min-height', $('.main-div').height()); 设置...不过,还有一种更灵活的方法是遍历一组元素,然后将高度设置最高的那个元素的高度: var $columns = $('.column'); var height = 0; $columns.each(function...12、通过文本查找元素 通过使用jQuery中的contains() 选择器,你可以找到元素内容的文本。

3.9K60

【译】Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例

不是很好的反馈吗?另外,当图片源发生故障时,可以向其中添加伪元素。 1.4 响应式图片 ? 的优点在于,可以针对特定视口大小将其扩展具有多个版本的图片。例如,这可用于商品图片。...对于 来说,除非我们覆盖层添加一个单独的元素,否则无法做到这一点。 3. SVG SVG被认为是图像,它的最大功能在于缩放不影响质量。...JavaScript动态更改背景图片。....hero img { /* 其他样式 */ background: #2962ff; } ? 好处是,只有在图像失败的情况下,背景才会起作用。那不是很酷吗?...4.3.2 使用具有 的 现在的问题是,要添加内边框,我们不能使用内部 box-shadow,因为它对图像不起作用。

5.6K20
领券