小编Van*_*als的帖子
translateZ()vs scale()中的CSS错误渲染
我注意到在以这两种方式转换文本时存在很大的质量差异:
.text1 {
width: 200px;
height: 22px;
position: absolute;
top: 40%;
left: 0;
transform-origin: 50% 50%;
transform: scale(2); /* here */
color: red;
text-align: center;
font-size: 22px;
}
.text2 {
width: 200px;
height: 22px;
position: absolute;
top: 60%;
left: 0;
transform-origin: 50% 50%;
transform: translateZ(400px); /* here */
text-align: center;
font-size: 22px;
}
.perspective {
width: 200px;
height: 200px;
perspective: 800px;
transform-style: preserve-3d;
}<div class="perspective">
<div class="text1">Text</div>
<div class="text2">Text</div>
</div>在Z轴上移动文本时,有没有办法强制渲染更好的渲染？
推荐指数
解决办法
查看次数
在AngularJS中模块之间发送数据的正确方法是什么？
angular的一个好处是你可以拥有独立的模块,你可以在不同的地方重用它们.假设您有一个模块可以使用列表进行绘制,排序和执行许多操作.假设此模块将在您的应用程序周围使用.最后,说你想以不同的方式填充它.这是一个例子:
angular.module('list', []).controller('listController', ListController);
var app = angular.module('myapp', ['list']).controller('appController', AppController);
function AppController() {
this.name = "Misae";
this.fetch = function() {
console.log("feching");
//change ListController list
//do something else
}
}
function ListController() {
this.list = [1, 2, 3];
this.revert = function() {
this.list.reverse();
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="app" ng-app="myapp" ng-controller="appController as App">
<div class="filters">
Name:
<input type="text" ng-model="App.name" />
<button ng-click="App.fetch()">Fetch</button>
</div>
<div class="list" ng-controller="listController as List">
<button ng-click="List.revert()">Revert</button>
<ul>
<li ng-repeat="item in List.list">{{item}}</li>
</ul>
</div>
</div>现在,当您单击"获取"按钮时,您将使用$http依此类推将名称(以及其他过滤器和内容)发送到API …
推荐指数
解决办法
查看次数
是否有可能使querySelectorAll像getElementsByTagName一样生活？
getElementsByTagName()有两个很棒的功能:它很快,它是现场.但如果我想得到怎么办呢p strong.当然我可以getElementsByTagName()再次使用精炼选项,但是我不会失去新p标签的实时效果吗？
有没有办法querySelectorAll变成现场选择器？
或者......是否有一种方法可以使用getElementsByTagName()和getElementsByClassName()创建一个以类似的方式工作的函数(至少与后代一样),querySelectorAll但是生存？
javascript dom css-selectors selectors-api getelementsbytagname
推荐指数
解决办法
查看次数
如何在CSS上浮动字体大小值在浏览器中呈现？
CSS em是一个很棒的工具,但有些东西总是让我烦恼,可能是因为我完全不了解它们.
字体在每个尺寸上都不会同样正确,尤其是在不精确的值上.这就是为什么,如果你想使用em精确的像素值给字体,你必须做的事情(假设你没有改变身体的16px字体大小):
font-size: 0.875em; /* 14px */
font-size: 1.25em; /* 18px */
也许你只是想增加一点尺寸,但后来意识到0.9em= 14.4px,然后你害怕你的字体可能看起来模糊!在任何情况下,如果你给一个段落font-size的1.25em(18px),然后,改变从16px的身体大小14px的,那么该段将17.5px.再次模糊!
假设我们正在开发常见的1x配额屏幕,例如桌面屏幕,那么,如何11.5px渲染字体？我把它们打印在一个测试html文件上,它们看起来就像一个12px字体.但这是所有浏览器中推荐的行为吗？那么在使用ems时,填充和边距等大小可能由字体大小决定？他们也被围捕了吗？
编辑:我在3个市长的浏览器上做了一个比较.这里是:
我把它缩小了一点(200%),以便更容易看到细节.在顶部,您可以看到相同的文本在14px(左)和14.4px(右)呈现的方式.下面,我使用差异混合模式将它们叠加在photoshop上,看看是否有任何差异.正如您所看到的,Chrome会对字体大小进行舍入,并将其渲染为相同的大小,同时,框的高度也不同.Firefox具有相同的高度,但字体在x轴上呈现略有不同,而字体的高度似乎相等.IE结果是一种混合.无论如何,我真的很惊讶,因为14.4px字体似乎根本没有模糊.
推荐指数
解决办法
查看次数
块引用必须包含段落还是段落必须包含块引用？
在 HTML5 中，把blockquotes段落放在里面是正确的还是相反的正确方式？我的意思是，逻辑告诉我们 ablockquote可能引用了多个段落，不是吗？
但是blockquotes不需要包含q元素吗？有人可以向我解释正确的结构吗？
编辑：添加一些信息。我有这个疑问，因为在尝试使用 CSS 实现引号时，它们不会出现blockquote在q元素上，但会出现在元素上。这样做的正确方法是什么？
blockquote, q {
quotes: "\201C""\201D""\2018""\2019";
font-style: italic;
}<blockquote>
<p>Hello!</p>
<p>Say something!</p>
</blockquote>
<p>He told me <q>Say something!</q>
</p>推荐指数
解决办法
查看次数
Matches()选择器不起作用
我正在测试它,它应该在Chrome 47上运行(http://caniuse.com/#search=matches):
.results h4 {
color: red
}
.results :matches(h4) {
color: blue;
}
:matches(h2, h4) {
font-size: 2em;
}<div class="results">
<h4>Hello</h4>
</div>
<h2>Hi</h2>你好应该是蓝色和大,但它是红色的!为什么？
推荐指数
解决办法
查看次数
当柔性包裹物包裹时,柔性收缩是否有用？
我不会一起思考flex-shrink和flex-wrap:wrap;理解,但我想知道是否有一些我缺少的东西.
.container{
background: #DDD;
width: 300px;
height: 100px;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap
}
.tags{
background: orange;
box-sizing: border-box;
flex: 1 3 200px;
}
.redes{
background: cyan;
box-sizing: border-box;
flex: 0 1 200px;
}
.wrap{
flex-wrap: wrap;
}<div class="container">
<div class="tags">box1</div>
<div class="redes">box2</div>
</div>
<div class="container wrap">
<div class="tags">box1</div>
<div class="redes">box2</div>
</div>据我所知,当flex-wrap设置为nowrap时,负空间将使用值进行分配flex-shrink.同时,如果flex-wrap设置为包裹,则不会有任何负面空间,可以吗？因此这个属性是没用的,或者至少我可以看到任何效果.这是正确的吗？
推荐指数
解决办法
查看次数
如何在彩色文本上剪辑背景(仅限css)
我的网站上有一个产品配置器.用户可以在衣服上书写单词,并在产品图像上显示文本.
我想把这个文字的样式看起来像刺绣.所以我把文字阴影,文字颜色改变了产品颜色的功能,但是现在,我想在颜色上加一个"过滤器".
约束:我只能访问CSS.
这是我做的小提琴:
#text
{
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
-webkit-font-smoothing:antialiased;
text-shadow: 2px 2px 2px black;
color:lightblue;
}
#text:after
{
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg');
-webkit-background-clip:text;
-moz-background-clip:text;
-webkit-text-fill-color:transparent;
}
提前致谢.
推荐指数
解决办法
查看次数
背面可见性不适用于儿童
这个解决方案(Webkit背面可见性不起作用)不起作用,因为我想在容器内部有其他转换对象来显示背面.
.container {
position: relative;
transform-origin: 50% 50% 0;
transition: transform 1s ease 0s;
width: -moz-min-content;
width: -webkit-min-content;
}
.container img {
backface-visibility: hidden;
}
input:checked + .container {
transform: rotateY(180deg);
}<input type="checkbox" name="" id="" />
<div class="container">
<img src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="" />
</div>那只猫的背面不应该是可见的.解决这个问题的任何方法？
推荐指数
解决办法
查看次数
如何使用Symfony QueryBuilder检索实体ID？
我正在尝试个性化symfony 2.4存储库查询以仅检索某些字段.平面字段一切正常,但在检索实体字段时,我只获取id(默认情况下),但不获取整个实体数据.我的查询:
$select = $this->createQueryBuilder('ca')
->select('ca.id, ca.name')
->leftJoin('ca.users', 'user')
->addSelect('(user) as users');
$select->setMaxResults($count);
return $select->getQuery()->getResult();
结果是: [{id: 1, name: "Some name", users: 1}, ...]
如何更改此查询以便用户包含整个用户数据,如ID,名称,地址等？
推荐指数
解决办法
查看次数