标签: opacity

我需要来自Inkscape和Imagick的相同输出.

这是从Inkscape导出的预期结果.

但是,下面的PHP代码会输出以下错误结果.

PHP代码:

<?php
$im = new Imagick();

$im->setResolution(400,400);
$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob(str_replace(array("color1", "color2"), array("yellow", "blue"), file_get_contents("img.svg")));

$im->setImageFormat("png");
header("Content-type: image/png");
echo $im;
?>

SVG代码:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
<rect width="100%" height="100%" fill="green" />
<path d="M250 150 L150 350 L350 350 Z" opacity="0.9" fill="color1" />
<path d="M150 50 L50 250 L250 250 Z" opacity="0.9" fill="color2" />
</svg>

那么这个问题有点奇怪,

我有一个网站,其中背景图像随着淡入/淡出过渡而变化

视频:http://www.screenr.com/ZCvs

网络在行动:http://toniweb.us/gm

标记:

        <div class="fondo" onclick="descargar(2,500);descargar(1,500);"></div>
        <div id="headerimgs">
            <div id="headerimg1" class="headerimg"></div>
            <div id="headerimg2" class="headerimg"></div>
        </div>
        <!-- Inicio Cabecera -->

CSS:

.headerimg { 
    background-position: center top; background-repeat: no-repeat; width:100%;position:absolute;height:100%;cursor:pointer; 
     -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}
.headerimg img{ 
    min-width:100%; width:100%; height:100%;
}

    .fondo{
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    cursor:pointer;
}

使用Javascript:

/*Gestion de pase de imágenes de fondo*/
$(document).ready(function() {
    /*controla la velocidad de la animación*/
    var slideshowSpeed = 3000;
    var transitionSpeed …

我想div中的图像是不透明的,而div是透明的.我尝试设置图像和div的不透明度,但它不起作用.

jsFiddle链接:http://jsfiddle.net/2BNEF/10/

我希望图像不透明,文本透明可见.

<div id="targetframe">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and …

我想构建一个Control支持Opcacity属性的派生类.
这个控件既可以托管文本也可以托管图像,并且可以将它们淡出和放入.
这是我的代码:

internal class FadeControl : Control
{
    private int opacity = 100;

    public FadeControl()
    {
        SetStyle(ControlStyles.SupportsTransparentBackColor, true);
    }

    public int Opacity
    {
        get
        {
            return opacity;
        }
        set
        {
            if (value > 100) opacity = 100;
            else if (value < 1) opacity = 1;
            else opacity = value;

            if (Parent != null)
                Parent.Invalidate(Bounds, true);
        }
    }

    protected override CreateParams CreateParams
    {
        get
        {
            CreateParams cp = base.CreateParams;
            cp.ExStyle = cp.ExStyle | 0x20;
            return cp; …

如何填充没有不透明度的flot线图？

lines: {
    show: true,
    fill: true,
    lineWidth:1
   }

有没有办法将不透明度编码到这个多边形中？我正在尝试,但filter: drop-shadow( 6px 0 2px rgba(xxx,xxx,xxx,x.x))似乎没有工作.

这是一个jsfiddle:http://jsfiddle.net/buhL2wjb/

HTML:

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-right-arrow" viewBox="0 0 20 152" preserveAspectRatio="xMinYMid meet">
        <polygon points="0,0 0,152 20,76"></polygon>
    </svg>
</div>

CSS:

.container{
    width:500px;
    height:300px;
    border:1px solid lightgrey;
}
.svg-right-arrow{
    height:100%;
    -webkit-filter: drop-shadow( 6px 0 2px #000000 );
        filter: drop-shadow( 6px 0 2px #000000 );
    }
.svg-right-arrow polygon{
    fill:lightblue;
}

我是 JavaScript 的新手，我正在尝试编写一段代码，在我熟悉的命令中淡入图片。我在这里看到了几个例子，但它们不起作用。这就是我试图做的：

 function myFunction() {
   for (i = 1; i < 20; i++) {
     setTimeout(function() {
       o = 1 - 1 / i
     }, 200); //this should increase the opacity
     document.getElementById("dog").style.opacity = o
   }
 }

img {
  opacity: 0;
  filter: alpha(opacity=40);
}

<center>
  <img id="dog" src="dog.jpg" draggable="true" ondragstart="drag(event)" width="500" height="500">
</center>

<button onclick="myFunction()">Lets Rock</button>

当我运行它时，它不会淡入。它以空白屏幕开始（正如它应该的那样），但不是在我单击按钮后淡入，而是在单击几次后弹出（不淡入）。

非常感谢你给予
Ariel的帮助

我在 css 中向 html 元素添加了背景图像，以便它随着 Web 浏览器的大小而扩展。我将此 html 元素中的不透明度更改为 0.5。我想将子元素（特别是 h1 和段落元素）更改回不透明度 1，以便文本不透明。这不起作用。请帮忙 ：）

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel = "stylesheet" href = "style.css">
</head>

<body>

    <p id ="topBar"></p>

    <h1>Heading</h1>

    <h3>Name</h3>

    <p> 
        Paragraph
    </p>

    <h3>Heading</h3>

    <p>More text</p>

    <h3>Send us an email!</h3>

    <form>
        <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
        <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
        <input type="submit" value ="Send" name="send">
    </form>

    <p id ="bottomBar"></p>
</body>
 </html>

CSS：

html {

background: url(pen.jpg) no-repeat center fixed;
background-size: cover;


font-family: …

我想创建一个Leaflet地图，它能够在不同的地图图层之间切换。这当然没有问题。

但我想添加一个滑块，可以在实际地图播放器和前一个地图播放器之间进行混合，以方便地比较这两个地图的内容：滑块 = 右=> 实际地图的 100% 不透明度滑块 = 左=> 实际地图的 0% 不透明度地图，这意味着前地图滑块的 100% 不透明度 = 中间=> 实际地图的 50% 不透明度，这意味着背景中的前地图也透光了 50%

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend 2 maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
    html, body, #map {height: 100%;}
</style>
</head>

<body>
<div id="map"></div>
<script>

// 1.) BASEMAPS …