小编web*_*iki的帖子

当流体宽度(基于百分比)容器太小而无法显示整个图像时,如何使图像保持居中？

如何将图像置于其容器中心

这意味着当容器太小时,它应该显示图像的中间而不是侧面.

我想知道如何在悬停时制作旋转或旋转的图像.我想知道如何使用CSS在以下代码上模拟该功能:

img {
  border-radius: 50%;
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

我有一个固定宽度的div,但div内的文本可以改变.

是否有一种方法用css或其他方式设置字母之间的间距,以便文本总是完美地填充div？

我试图在边界上悬停时扩展的边界上获得过渡悬停效果.

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: left 250ms ease-in-out, right 250ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}

<h1>CSS IS AWESOME</h1>

我在Jsfiddle上尝试过这个

我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.

期望的输出:

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}

<div class="barShow"></div>

该透明CSS箭应该是没有颜色的透明.

我希望能够绘制它的一个片段另一种颜色的圆圈,我想覆盖到能够在增量增加段的数量10%从0%到100%.

Google上的所有示例都是所有行业而不是细分市场

到目前为止,这是我能够提出的最好的:

div.outerClass {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 2.5px;
    overflow: hidden;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

div.innerClass {
    width: 10px;
    height: 10px;
    border: 5px solid green;
    border-radius: 36px;
}

<div class="outerClass">
    <div class="innerClass"></div>
</div>

0%,50%和100%我都可以做.

我需要创建一个DIV,其中width=height和height=100%视口(显然,它是可变的).

换句话说,一个完美的方形DIV,它根据视口的高度计算它的尺寸.该DIV中的元素将其尺寸作为父DIV的高度和宽度的百分比.

在我看来,在CSS中这应该很简单,但我已经坚持了!任何指针都将非常感激.

我需要制作许多非矩形形状的图案.每个形状必须是交互式的,并在点击时显示图像.
要求是拍摄彩色玻璃的图像并将其转换为填充图像的网页.每个窗格必须是可点击的,类似于您在教堂中看到的窗格,但在第一次加载时,每个形状都是黑色和白色,点击它会显示玻璃的颜色.

我想这个解决方案将包含两个部分,整个彩色玻璃图像的彩色版本和它上面的黑白版本.然后不知何故,点击时每个小玻璃窗都需要隐藏它下面的黑色和白色部分,以显示下面的彩色图像.

我不知道最好的解决方案是什么,并没有找到任何有用的帮助沿着类似的形状和随机的交互区域做一些事情.我在结果下方插入了一个示例,想象每个玻璃部分都是可点击的,点击后会显示颜色.

白线仅表示每个窗格的行为独立于其他窗格.

是否可以在同一元素上应用CC平移X和Y？

如果我尝试这个翻译,翻译会覆盖translateX:

.something { 
        transform: translateX(-50%);
        transform: translateY(-50%);
}

我想创建一个形状,我将其描述为"反向圆":

图像在某种程度上是不准确的,因为黑线应该沿div元素的外边界继续.

这是我目前所拥有的演示:http://jsfiddle.net/n9fTF/

CSS没有图像,这甚至可能吗？