有没有办法设置ff,即打印背景图像?
我正在使用星星图像来分类一些技巧,我将其设置为背景图像并定位为设置一个开始,两个,三个等.当我尝试打印页面时,图像消失.
那么有什么方法可以让我们在打印页面时出现它们,或者至少有办法用*或者可见的东西替换图像?
我们的客户希望在较小的屏幕上拥有与在较大屏幕上不同的横幅图像.不仅缩小/拉伸以适合,而且实际上替换不同的图像.全尺寸图像相当复杂 - 有几个人,两个徽标和一些装饰性文字 - 因此对于较小的图像,他们想要裁剪一些人,删除徽标等.所以他们想要最大的,桌面最复杂的图像,中型设备的图像更简单,然后更小,更简单的图像.
做这个的最好方式是什么?
我的第一个想法是包括所有三个图像,并使用@media min/max widths使其中两个在任何给定大小都不可见.喜欢:
@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px) { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px) { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }
Run Code Online (Sandbox Code Playgroud)
这应该工作,但每次都会下载所有三个图像,这似乎是浪费带宽.
我可以将图像从img标签更改为css背景图像.会更好吗?这会避免下载这三个还是仍然会这样做?
我正在考虑编写一些JavaScript来根据屏幕大小动态更新img标签中的URL,但这似乎是一堆复杂性.
我简要地想过将徽标和文本分开并将实际图片分成几块,然后尝试将它们全部组合成重叠图像.但这听起来似乎要做很多工作,然后我必须确保它看起来正确的尺寸,不是那么容易缩小或拉伸等等.虽然它可能在这个特定的我希望将来可以使用一般的解决方案.
有人做过类似这样的事情并对最好的方法有一些想法吗?
我需要在其中一个元素上设置“封面”背景。
什么是使用CSS的利弊background-size: cover与实际img使用object-fit: cover?
据我所知,我可以通过 srcSet 和大小在响应性方面更好地控制 img。但是它在没有 polyfill 的 IE11 中不起作用。
我有一个网页,其中包含一些背景图像和CSS颜色,但当我使用ctrl + p其显示页面打印页面打印预览没有CSS和背景颜色.
我有一个div具有内联样式属性的元素(因为div的背景图像将在编码中使用for循环动态选择),如下所示
<div class='assessment' style='background-image: url('/static/images/print_%s.png')' >
<p></p>
<p></p>
</div>
Run Code Online (Sandbox Code Playgroud)
所以我在这里读了一些东西,我们可以编写print mediacss来使背景图像和颜色默认可见
@media print {
.assessment {
visble:visible;
}
}
Run Code Online (Sandbox Code Playgroud)
但我不知道如何用style='background-image: url('/static/images/print_%s.png')我在上面的div中的内联css()来编写这个媒体css
那么如何使用内联css编写媒体css,以便在某些点击时默认情况下在打印预览中显示背景图像ctrl+p?
使用幻像JS 1.9.7我在将我的网页打印为PDF时遇到问题.
不是精确地匹配页面,而是剥离背景颜色和图像,如下所示: 如何强制浏览器在CSS中打印背景图像?
点击"打印"时会丢失字形,但在浏览器窗口中显示正确.我说的是一个带有静态内容的简单页面,除了最新的twitter bootstrap.
是否可以在打印中显示Bootstrap图标?
我有一个页面,其中包含必须可打印的统计图表等。我只想使用标准浏览器打印功能来启用打印。我还有 css,它可以更改所选按钮的按钮颜色,以明确正在查看哪些图表。但是,我的问题是,当我尝试打印页面时,这种颜色会丢失并重置为其默认呈现方式。
我知道通过在 CSS 中使用 webkit-print-color-adjust 设置在 Chrome 中执行此操作的功能,但是,我企业中的绝大多数用户使用 IE 或 Edge(因为它们是 Microsoft 默认值),因此我需要一个适用于他们的解决方案。
我尝试使用 !important 和 @media print 但目前还没有效果,除非我使用错误。
目前的 CSS 是这样的:
@media print{
.btn-primary-chart:active,
.btn-primary-chart.active {
color: #ffffff;
background-color: green !important;
border-color: #285e8e;
}
}
Run Code Online (Sandbox Code Playgroud)
任何帮助将不胜感激 :)
是否有任何解决方案可以使打印页面的首页背景与其他页面背景不同?
还要使每个页面的边距不同?
我尝试了不同的解决方案,但没有奏效;这是我尝试过的解决方案:
@page {
margin: 0px;
}
@page :first {
background: none;
margin-bottom: 60px;
}
@media print {
body {
background: url('../img/background.jpg') repeat-y !important;
}
}
Run Code Online (Sandbox Code Playgroud) css ×6
html ×6
image ×2
printing ×2
firefox ×1
glyphicons ×1
icons ×1
javascript ×1
phantomjs ×1
styling ×1