CSS3缩放 - 防止缩小文本 [英] CSS3 Scale - Prevent from scalling text

问题描述

因此，面对一些代码的问题，我很快写了一个简单的例子来显示在jsfiddle的效果： http： //jsfiddle.net/0v0syunc/

So im facing an issue with some code, i have quickly written a simple example to show the effect in jsfiddle: http://jsfiddle.net/0v0syunc/

我需要做的是防止TEXT扩展，但一直努力做到这一点，我使用background-size但是在任何版本的IE，包括10/11 - 不支持任何人有任何想法？

What i need to do is prevent the TEXT from scaling but been struggling to do this, i used background-size before scale which worked fine but that's not supported in any version of IE including 10/11 - anyone have any ideas?

h2 {
  color: #ffffff;
}
.box {
  background: #000000;
  width: 50%;
  height: 50%;
  text-align: center;
  padding: 10px;
}
.box:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

<div class="box">
  <h2>TEST TEXT</h2>
</div>

推荐答案

似乎你再次提出同样的问题。我将把以前的策略重写为您重复的问题：

Seems like you have asked the same question again. I'll rewrite the pre-existing strategy to your duplicate question:

背景和文本应该分开。背景可以是伪元素（最具语义有效性）或空元素（例如< div>< / div> ）。选择归结为你是否支持允许转换伪元素的浏览器（如果你想使用CSS转换，但在你的问题中你没有提到它）。

The background and the text should be separated. The background can either be a pseudo-element (most semantically valid), or an empty element (e.g. <div></div>). The choice boils down to whether or not you want to support browsers that allow transitioning of pseudo elements (in the event that you want to use CSS transitions, but in your question you didn't mention it).

我将使用伪元素方法。标记保持不变，但CSS稍作修改：

I'll use the pseudo-element method. The markup remains the same, but the CSS is slightly modified:

h2 {
  color: #ffffff;
}
.box {
  width: 50%;
  height: 50%;
  text-align: center;
  padding: 10px;
  position: relative;
}
.box::before {
  background-color: #000;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.box:hover::before {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

请参阅fiddle here： http://jsfiddle.net/teddyrised/0v0syunc/7/

See fiddle here: http://jsfiddle.net/teddyrised/0v0syunc/7/

这篇关于CSS3缩放 - 防止缩小文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！