小编God*_*win的帖子

我有一个包含背景图像的图表列表.类似于以下内容:

<ul>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
</ul>

这些图像中的每一个都background-size设置为cover并background-attachment设置为fixed.

figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

当每个图形占据整个视口时,这可以正常工作,但如果存在任何类型的偏移,则背景图像被剪切.

据我所知,这是设计(https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

我希望图像可以垂直或水平剪辑,但不能同时剪辑,而是以图形本身的大小为中心.

我知道有javascript解决方案但是有没有办法用CSS做到这一点？

这是一个工作示例:http://codepen.io/Godwin/pen/KepiJ

我正在尝试创建一个用特定路径屏蔽图像的SVG,但是当我尝试使用图案填充区域时,图像不会覆盖整个区域.

预期

实际

在我的defs定义模式中:

<pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0">
  <image xlink:href="http://goo.gl/kVVuy1" x="0" y="0" width="100%" height="100%" />
</pattern>

和形状:

<path id="shape" d="M80.4,0c0,33.3,0,66.7,0,100c-26.8,0-53.6,0-80.4,0c0,0,0-0.1,0-0.1 c3.3-12.3,6.5-24.6,9.8-37c0.9-21,1.9-41.9,2.8-62.9C35.2,0,57.8,0,80.4,0z" />

然后我包括形状:

<use xlink:href="#shape" fill="url(#image)"></use>

我正在使用的图像是动态资产(用户上传),但是如果需要我可以获取尺寸.

解决这个问题的任何解决方案都会有所帮助,我尝试使用image带面具但没有运气.只要蓝色背景图案显示通过而没有红色,那么我的问题就应该解决了.

以下是工作示例:http://codepen.io/Godwin/pen/hazqA

我正在Windows机器上构建一个rails网站但是当我检查我的Gemfile.lock时,我的Travis版本出现以下错误:

Your bundle only supports platforms ["x86-mingw32"] but your local platforms are ["ruby", "x86_64-linux"], and there's no compatible match between those two

名单

这是完整的日志:https://travis-ci.org/bikebike/BikeBike/builds/222395810#L654

我查看了我的Gemfile.lock并说明:

PLATFORMS
  x86-mingw32

这似乎是问题的一部分.我已经尝试将任何特定于Windows的宝石放在一个platforms块中:

platforms 'mswin', 'mingw', 'mswin64', 'x64_mingw' do
  gem 'tzinfo-data'

  group :test do
    gem 'wdm', '>= 0.1.0'
    gem 'win32console', require: false
  end
end

但是Gemfile.lock看起来是一样的.

这是我的完整Gemfile和Gemfile.lock.

我可以通过从git中删除Gemfile.lock文件来暂时解决这个问题,但这不是最佳做法.无论如何,我可以提交我的Gemfile.lock文件并继续在我的Windows机器上开发？

我试图将CSS样式放在列表第一行的列表项中,但似乎Chrome,Firefox和Safari都不接受该样式.

ul:first-line > li {
    display: inline;
    /* my styles here */
}

我是否忽略了我指定样式的方式,这是CSS实现中的疏忽还是故意的CSS规范？如果是后者,那背后有一个很好的理由吗？

JSFiddle:http://jsfiddle.net/e3zzg/

编辑:
请注意,似乎非常明确,目前无​​法单独使用CSS实现这一目标,但从研究的角度来看,对后人来说,我很好奇为什么会这样.如果你在firstline伪元素上阅读W3C CSS规范,似乎没有提到内部元素.感谢大家尝试提供替代解决方案,但除非实际有CSS解决方案,否则这里的问题是"为什么",而不是"如何"或"可能".

它看起来像webkit中有一个错误,可能是一个舍入问题,导致该background-size属性在设置时无法覆盖整个元素cover.

jsFiddle:http://jsfiddle.net/um4cQ/(如果你看不到左边或上面的红色背景,请尝试调整结果区域的大小).

我已经看到网络上的一些错误,有些可以追溯到2011年,但我还没有听到开发人员的任何消息.更重要的是暂时,如果有一个CSS解决方法(不使用javascript).

有没有人为此找到了可行的解决方法？

以下示例不起作用,因为parent在类中调用时A,php会查找类的父类,A但它不存在.我宁愿这一行在Test()课堂上打电话B.

这可能吗？

(我知道这似乎是一个愚蠢的例子,但它有一个实际应用)

abstract class A {
    function CallParentTest()
    {
        return call_parent_method('Test');
    }
}

abstract class B extends A {
    function Test()
    {
        return 'test passed';
    }
}

class C extends B {
    function Test()
    {
        return $this->CallParentTest();
    }
}

$object = new C();
echo $object->Test();

谢谢!

编辑
我将parent关键字更改为组合方法,call_parent_method因为我认为这可能让人感到困惑.我知道使用关键字无法做到这一点.

正如David Harkness指出的那样,我正在尝试实现模板方法模式,但我没有使用两个不同的方法名称,而是使用了一个.B::Test()除非替换为替代功能,否则将是默认方法.

我知道如何使用该near方法在一定半径内获取所有结果，但是如何获取所有结果和按距离排序？

我知道我可以做这样的事情：

Location.near(my_location, 999999, order: 'distance')

但是，我宁愿完全跳过半径检查，而只是将所有结果按距离排序。

如果role属性不存在并且文档包含可见图形，我一直在尝试确定 SVG 标记的默认角色应该是什么。

使用 Chrome 的辅助功能工具，它告诉我角色是SVGRoot：

然而，这不是一个有效的 ARIA 角色，它是 Chrome 自己在内部使用的角色之一。

我已经能够通过此文档找到更多信息：WAI-ARIA 图形模块，它指示允许在 SVG 标签上使用哪些角色，但我似乎无法缩小哪个应该是默认角色的范围。

如果没有role提供有效的属性，用户代理应该默认 SVG 扮演什么角色？