Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >YouTube导航菜单上的1px x 1px gif

问YouTube导航菜单上的1px x 1px gif
EN

Stack Overflow用户

提问于 2012-01-03 15:53:39

回答 1查看 330关注 0票数 6

为什么YouTube的导航菜单上的图标使用1px x 1px的透明图像？然后，他们使用css将最终图标设置为1px图像的背景图像。

他们为什么要使用这种技术呢？

background-image

云直播特惠9.9元起

针对高并发播放、高并发推流、超低延迟等不同直播场景，提供极速、稳定、专业的一站式云端直播处理服务

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-01-03 17:11:02

我认为他们这样做是为了提高性能。

你看，他们使用css为标签添加了背景，背景是使用sprite来减少HTTP请求并提高youtube的加载速度，声称他们这样做是为了防止人们窃取他们的图像，这是彻头彻尾的垃圾。

接下来的部分我可能会发现有点难以解释，所以我会尽我最大的努力，如果我在这里失去了你，很抱歉：

使用image标签是因为必须有一些实际的东西来提供背景，并且在那里有一个图像是有意义的(因为实际上那里有一个图像，它只是使用CSS而不是HTML生成的)，例如，他们可以很容易地在那里放一个div标签，但放一个div标签并不比放一个image标签更有意义(即使他们放在那里的img是一个1px x 1px的空图像)

他们也可以这样做，以提高一致性，例如，他们也在他们网站的其他部分使用了这一点，参见youtube左上角的徽标，使用的技术与alt文本相同，这里需要空白图像，因为否则alt文本将显示在那里(您可以使用firebug去除图像，明白我的意思)；这里的image标签用于提高可访问性，而不会影响速度(您可以获得sprites的速度和标签的alt属性的可访问性)。

希望这是有意义的

票数 6

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8714851

复制

相关文章

iOS去除导航栏和tabbar的1px横线

1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线，主要是颜色太不协调了去除之前的图片要去除这1px的横线，首先应该知道它是什么，在Xcode的界面调试中可以看到，它其实是UIIm

傅_hc

2018/06/28

1.8K0

html 边框变粗 margin -1px

本文主要介绍了在HTML和CSS中如何解决边框变粗的问题。首先介绍了一种常见的方法，即使用`list-style: none`属性来移除列表的标记，并使用`border`属性来设置边框的宽度、样式和颜色。然后，本文介绍了一种使用`margin`负值的方法，即通过设置`margin-top`和`margin-left`的值为负数，来实现边框的变粗效果。最后，本文还介绍了一种使用`border-top`和`border-bottom`属性来取消顶部或底部边框的方法，以及一种使用`border-collapse`属性来合并单元格边框的方法。

用户1171305

2017/12/28

3.2K0

html 边框变粗 margin -1px

iOS UICollectionView等分有1px缝隙

在使用UICollectionView开发无缝隙或者间隙为1px的页面的时候应该会遇到这样的问题(iPhone 5s 没有问题)，明明是把屏幕四等分了,但为什么会有下图的空白间隙呢? 等分有缝隙再检

傅_hc

2018/07/04

1.5K1

移动端1px解决方案

在移动端，css中的1px并等于移动设备的1px，因为手机屏幕有不同的像素密度。window中的devicePixelRatio就是反应css中像素与真实像素的比例，也就是设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。所以造成了通过css设置1px，在移动端屏幕上会变粗。

Tiffany_c4df

2019/09/04

1.7K0

h5 1px 细线如何实现

主要原理是使用媒体查询，通过伪元素来实现，针对不同的设备 dpr ，进行不同比例的缩放，

蓓蕾心晴

2022/10/30

3100

移动端1px边框解决方案

.border-1px { position: relative; } .border-1px:after { position: absolute; content: ''; top: -50%; bottom: -50%; left: -50%; right: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); border-top: 1px solid #666; } @media (-webk

FinGet

2019/06/28

5810

前端-移动端1px问题的解决办法

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了

grain先森

2019/03/29

9930

前端-移动端1px问题的解决办法

在retina屏中实现1px border效果

sass css http iphone ios

街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先，来看下面视觉给的输出图中的border：

IMWeb前端团队

2019/12/03

6230

在retina屏中实现1px border效果

在retina屏中实现1px border效果

根据给定的文章内容，撰写摘要总结。

IMWeb前端团队

2017/12/29

1.1K0

在retina屏中实现1px border效果

目前解决移动端1px边框最好的方法

在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。

用户6167509

2020/07/23

1.6K0

emlog 5.x导航菜单导航栏调用代码

php 博客程序函数日志

emlog程序的导航菜单调用代码不像zblog博客程序直接提供函数标签调用，emlog还需要代码的编写，初次制作emlog的新用户可能会不习惯，但emlog官方wiki也提供了相应的菜单导航模块函数代码。

用户8099761

2023/05/10

6760

7、reset.css的引入及1px边框问题的解决

因为不同的浏览器默认的样式不同，所以在着手项目开始前，我们需要引入reset.css，将所有html标签的默认样式统一化。我这里推荐一个下载reset.css的网站：https://cssreset.com/，里面还有一些normalize.css之类的，大家有兴趣可以研究。

Ewall

2018/09/04

1.3K0

7、reset.css的引入及1px边框问题的解决

浏览器默认样式、1px边框问题、css预编译

vue.js css postcss sass http

参考链接：移动端1px解决方案 vue-cli css相关 normalize.css

Ewall

2020/04/01

4370

一、导航菜单_苹果cms什么导航菜单

java css https 网络安全 html

即页面样式，组成很简单，即一个文本输入框<input>和一个搜索图标，这里图标可以自行搜索下载一个，或者像下面一样使用在线图标，全部代码如下：

全栈程序员站长

2022/09/19

4.2K0

一、导航菜单_苹果cms什么导航菜单

移动端H5页面中1px边框的解决办法

border ui web开发前端移动端

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。简书中描述很好的文章，细节可以点击进去看，如果直接想看代码实现，请看下面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=

我乃小神神

2021/12/07

7280

各类导航菜单

http html jquery

以下内容由于涉及到很多学习DEMO 和下载链接，建议在PC端查看。以下资料都来自站长素材。

用户7293182

2022/01/17

2.5K0

关于动漫的HTML网页设计：期末前端web大作业——海贼王基地(6个页面)

javascript html css jquery java

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 --- <font color='#b44846' size='4px'> ❤</font> 【作者主页——获取更多优质源码】 <font color='#b44846' size='4px'> ❤</font> 【web前端期末大作业——毕设项目精品实战案例(1000套)】 -

IT司马青衫

2022/08/15

7830

HTML导航菜单

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159456.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/17

6.2K0

使用 WordPress 的导航菜单

wordpress 函数后台日志系统

WordPress 原来默认的导航菜单只能是页面，或者分类，或者两者，如果想自己加入一个自定义链接都需要修改主题，非常不方便，所以一个完全可定制化的自定义的 WordPress 导航菜单成了所有人的需求。

Denis

2023/04/14

2.1K0

使用 WordPress 的导航菜单

能用CSS实现的就不用麻烦JavaScript

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。——Atwood定律

lizhenwen

2021/07/18

1.4K0

相似问题

如何在.Net上创建1px X 1px

24

1px不等于1px？

10

一个1px x 1px正方形的大小是多少？

12

.split("1px")到Javascript中的["1px",1，"px"]

511

无序列表导航-悬停的元素左移1px

22

活动推荐

国内短信福利大放送，不要错过！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例