草庐IT

backGround

全部标签

html - 不使用JS可以实现这种灵活的布局吗?

可以在jsfiddle.net/k2h5b/上看到我在不使用JS的情况下尝试实现的目标.基本上我想显示两张图片,都居中,一张在背景,一张在前景:背景图片:应该覆盖整个窗口而不影响宽高比,这意味着图像将始终触及窗口的两个相对边缘,但图像将被裁剪。ForgroundImage:应该在窗口内而不影响宽高比,这意味着图像将始终接触窗口的两个相对边缘,但是图像不会被裁剪。是否为并不重要或标记,只要它们显示图像即可。还假设图像大小是预先知道的,可以在CSS或HTML部分中使用。所以我的问题是:是否可以仅使用CSS或CSS3?如果不可能,我会接受尽可能接近我的目标的答案。例子:当背景图片被上下裁剪时

javascript - 谷歌浏览器包应用程序 : How to make transparent rounded background like google hangout app?

如下图所示,环聊应用是完全透明的,并且还应用了背景阴影。我尝试了几种方法,但没有成功,将css样式应用于页面的“html”和“body”标记,并在创建新窗口时使用“frame:none”选项,但它不起作用。如何制作这样的谷歌浏览器包应用程序?有人知道吗?这是我正在试验的代码。ma​​infest.json:{"manifest_version":2,"name":"DemoApp","version":"0.1","description":"DemoPurpose","app":{"background":{"scripts":["background.js"]}},"permiss

javascript - 谷歌浏览器包应用程序 : How to make transparent rounded background like google hangout app?

如下图所示,环聊应用是完全透明的,并且还应用了背景阴影。我尝试了几种方法,但没有成功,将css样式应用于页面的“html”和“body”标记,并在创建新窗口时使用“frame:none”选项,但它不起作用。如何制作这样的谷歌浏览器包应用程序?有人知道吗?这是我正在试验的代码。ma​​infest.json:{"manifest_version":2,"name":"DemoApp","version":"0.1","description":"DemoPurpose","app":{"background":{"scripts":["background.js"]}},"permiss

html - 伪元素背景图片不出现

我有一个带有三Angular形边框的div元素,我试图使用带有的::after伪元素在其上方放置一个图像背景图片。虽然该方法不起作用。但是,如果我尝试设置content:"asd";,文本会正确显示。基本上我只想在那个三Angular形上方有一个房子图像。这是HTML代码:这是CSS:#estatecorner{position:absolute;right:0px;width:0;height:0;border-style:solid;border-width:080px80px0;border-color:transparent#67b2e4transparenttranspare

html - 伪元素背景图片不出现

我有一个带有三Angular形边框的div元素,我试图使用带有的::after伪元素在其上方放置一个图像背景图片。虽然该方法不起作用。但是,如果我尝试设置content:"asd";,文本会正确显示。基本上我只想在那个三Angular形上方有一个房子图像。这是HTML代码:这是CSS:#estatecorner{position:absolute;right:0px;width:0;height:0;border-style:solid;border-width:080px80px0;border-color:transparent#67b2e4transparenttranspare

html - 什么在搜索引擎中会被索引得更好 : img tags or background-images with screenreader tags?

在构建响应式网站时,我有时会使用背景图像来为适当的屏幕尺寸呈现适当的图像。例如:#image{background-image:url(largeimage.jpg);}@mediaonlyscreenand(max-width:320px){#image{background-image:url(smallimage.jpg);}}为了让屏幕阅读器知道我们正在处理哪种元素,我添加了role="img"还有一个aria-label这是我的问题:我一直了解到,SEO最好在实际图像元素中添加公司Logo等图像。例如原因是当谷歌图片搜索公司名称时,Logo会出现。(假设网站排名足够好)当作为

html - 什么在搜索引擎中会被索引得更好 : img tags or background-images with screenreader tags?

在构建响应式网站时,我有时会使用背景图像来为适当的屏幕尺寸呈现适当的图像。例如:#image{background-image:url(largeimage.jpg);}@mediaonlyscreenand(max-width:320px){#image{background-image:url(smallimage.jpg);}}为了让屏幕阅读器知道我们正在处理哪种元素,我添加了role="img"还有一个aria-label这是我的问题:我一直了解到,SEO最好在实际图像元素中添加公司Logo等图像。例如原因是当谷歌图片搜索公司名称时,Logo会出现。(假设网站排名足够好)当作为

html - 2列布局(左列固定宽度,右列流体+清除:both)

只是需要帮助,因为我多年来一直在努力解决这个问题。我需要什么:我有一个2列布局,其中左列的宽度固定为220像素,右列的宽度可变。代码是:Fluidhtml,body{background:#ccc;}.wrap{margin:20px;padding:20px;background:#fff;}.main{margin-left:220px;width:auto}.sidebar{width:200px;float:left;}.main,.sidebar{background:#eee;min-height:100px;}ThisisthestaticsidebarThisisthe

html - 2列布局(左列固定宽度,右列流体+清除:both)

只是需要帮助,因为我多年来一直在努力解决这个问题。我需要什么:我有一个2列布局,其中左列的宽度固定为220像素,右列的宽度可变。代码是:Fluidhtml,body{background:#ccc;}.wrap{margin:20px;padding:20px;background:#fff;}.main{margin-left:220px;width:auto}.sidebar{width:200px;float:left;}.main,.sidebar{background:#eee;min-height:100px;}ThisisthestaticsidebarThisisthe

html - 图片右下角怎么对齐

如何在页面右下角放置图片。.background-img{background:url('images/bg-img.png');width:100%;height:698px;repeat-x;}我用1px图像创建了背景图像。现在我必须将公司Logo放在页面右下角如何执行此操作..任何建议以及如何对此进行编码......进步谢谢...... 最佳答案 你可以使用绝对定位:position:absolute;right:0px;bottom:0px; 关于html-图片右下角怎么对齐,我