我刚刚签署了一个具体问题，希望您能提供帮助：）
我们的website有一个标题区域，其中标题具有灰色背景。
这里的问题仅出现在safari上：当出现换行符（由于较长的标题）时，safari仍以前一行行宽的宽度渲染背景色，并添加另一行。它在 Chrome ， Firefox 和其他操作系统上运行正常，但在 Safari 上却是这样。
HTML
idCSS
<div class="so-widget-sow-headline so-widget-sow-headline-default- 9cab5f85f9f7"><div class="sow-headline-container ">
<h1 class="sow-headline"> E-Learning-Erstellung </h1>
<div class="decoration">
<div class="decoration-inside"></div>
</div>
<h2 class="sow-sub-headline">Individuell. Von A-Z.</h2>
</div>
它的行为应与您预期的一样：当出现换行符时，它也应该破坏背景色。
答案 0 :(得分：0)
如果我理解正确，那么您希望背景色不覆盖整行，而只要您的文字覆盖整个背景？那是由于您的h1是一个块元素。通过应用“显示：内联”样式，它应仅将背景应用于文本的宽度。
<h1 class="sow-headline" style="display: inline"> E-Learning-Erstellung</h1>
<div class="decoration">
<div class="decoration-inside"></div>
</div>
<h2 class="sow-sub-headline">Individuell. Von A-Z.</h2>
</div>
如果需要，还可以更改行高，使其不覆盖下面的行。
希望这会有所帮助，以防万一我理解错误，可以共享一些打印屏幕！
答案 1 :(得分：0)
我用#!/usr/bin/php -f
<?php
// Make test images with ImageMagick as follows:
// convert -size 200x100 xc:magenta \( -size 80x180 gradient: -rotate 90 -bordercolor white -border 10 \) -compose copyopacity -composite png32:image1.png
// convert -size 200x100 xc:blue image2.png # Makes palettised image
// or
// convert -size 200x100 xc:blue PNG24:image2.png # Makes truecolour image
function extractAlpha($im){
// Ensure input image is truecolour, not palette
if(!imageistruecolor($im)){
printf("DEBUG: Converting input image to truecolour\n");
imagepalettetotruecolor($im);
}
// Get width and height
$w = imagesx($im);
$h = imagesy($im);
// Allocate a new greyscale, palette (non-alpha!) image to hold the alpha layer, since it only needs to hold alpha values 0..127
$alpha = imagecreate($w,$h);
// Create a palette for 0..127
for($i=0;$i<128;$i++){
imagecolorallocate($alpha,$i,$i,$i);
}
for ($x = 0; $x < $w; $x++) {
for ($y = 0; $y < $h; $y++) {
// Get current color
$rgba = imagecolorat($im, $x, $y);
// $r = ($rgba >> 16) & 0xff;
// $g = ($rgba >> 8) & 0xff;
// $b = $rgba & 0xf;
$a = ($rgba & 0x7F000000) >> 24;
imagesetpixel($alpha,$x,$y,$a);
//printf("DEBUG: alpha[%d,%d] = %d\n",$x,$y,$a);
}
}
return $alpha;
}
function applyAlpha($im,$alpha){
// If image is truecolour
// iterate over pixels getting current color and just replacing alpha component
// else (palettised)
// allocate a transparent black in the palette
// if not successful
// find any other transparent colour in palette
// iterate over pixels replacing transparent ones with allocated transparent colour
// We expect the alpha image to be non-truecolour, i.e. palette-based - check!
if(imageistruecolor($alpha)){
printf("ERROR: Alpha image is truecolour, not palette-based as expected\n");
}
// Get width and height
$w = imagesx($im);
$h = imagesy($im);
// Ensure all the lovely new alpha we create will be saved when written to PNG
imagealphablending($im, false);
imagesavealpha($im, true);
if(imageistruecolor($im)){
printf("DEBUG: Target image is truecolour\n");
for ($x = 0; $x < $w; $x++) {
for ($y = 0; $y < $h; $y++) {
// Get current color
$rgba = imagecolorat($im, $x, $y);
// Get alpha
$a = imagecolorat($alpha,$x,$y);
// printf("DEBUG: Setting alpha[%d,%d] = %d\n",$x,$y,$a);
$new = ($rgba & 0xffffff) | ($a<<24);
imagesetpixel($im,$x,$y,$new);
}
}
} else {
printf("DEBUG: Target image is palettised\n");
// Must be palette image, get index of a fully transparent color
$trans = imagecolorallocatealpha($im,0,0,0,127);
if($trans===FALSE){
printf("ERROR: Failed to allocate a transparent colour in palette. Either pass image with fewer colours, or look through palette and re-use some other index with alpha=127\n");
} else {
// Scan image replacing all pixels that are transparent in the original copied alpha channel with the index of a transparent pixel in current palette
for ($x = 0; $x < $w; $x++) {
for ($y = 0; $y < $h; $y++) {
// Essentially we are thresholding the alpha here. If it was more than 50% transparent in original it will become fully trasnparent now
if (imagecolorat($alpha,$x,$y) > 64){
imagesetpixel($im,$x,$y,$trans);
//printf("DEBUG: Setting alpha[%d,%d]=%d\n",$x,$y,$trans);
}
}
}
}
}
return $im;
}
// Open images to copy alpha from and to
$src = imagecreatefrompng('image1.png');
$dst = imagecreatefrompng('image2.png');
// Extract the alpha and save as greyscale for inspection
$alpha = extractAlpha($src);
imagepng($alpha,'alpha.png');
// Apply extracted alpha to second image and save
$res = applyAlpha($dst,$alpha);
imagepng($res,'result.png');
?>