Question

我有一个像这样定义的CSS类：

.MyClass .MyIcon {
  background: url("../Images/my_icon.png") no-repeat scroll 0px 0px transparent !important;  
}

但是图像对我需要的东西来说太大了。有没有办法将此图像从当前大小20 x 20缩小到16 x 16，使用CSS 。因此，制作另一张图片不是一种选择。

我一直在搜索不同的网站，但我觉得我错过了一些东西。

Thx任何帮助！：d

Answer 1

您暂时无法更改背景图片的大小，只有在支持css3的浏览器中才能使用background-size属性。

Answer 2

仅限CSS 3.它被称为background-size。

Answer 3

这是一篇有很好解释的文章：http://css-tricks.com/how-to-resizeable-background-image/ 虽然它在技术上不是背景图像，但它消除了javascript和css3的需要

Answer 4

之前已经提出并回答了这个问题。

Set size on background image with CSS?

如果你需要使图像更大，   你必须在一个编辑图像本身   图像编辑器。

如果您使用img标签，则可以更改   大小，但不会给你   如果你需要的话，你想要的结果   图像是其他一些背景   内容（它不会重复   就像你似乎想要的那样）...

话虽这么说，你可以创建一个PHP页面，或类似的东西，以调整大小的尺寸来提供图像。

.yourDivClass{
    background:url(/getImage.php?w=16&h=16&image=my_icon.png);
}

<强> getImage.php

<?php
$filename="../images/".$_REQUEST['image'];
smart_resize_imageFile(
    $filename, 
    $_REQUEST['w'], 
    $_REQUEST['h'], 
    true, 
    'browser', 
    false
);


function smart_resize_imageFile( $file, $width = 0, $height = 0, $proportional = false, $output = 'file', $delete_original = true, $use_linux_commands = false){
    if ( $height <= 0 && $width <= 0 ) {
      return false;
    }

    $info = getimagesize($file);
    $image = '';

    $final_width = 0;
    $final_height = 0;
    list($width_old, $height_old) = $info;

    if ($proportional) {
      if ($width == 0) $factor = $height/$height_old;
      elseif ($height == 0) $factor = $width/$width_old;
      else $factor = min ( $width / $width_old, $height / $height_old);   

      $final_width = round ($width_old * $factor);
      $final_height = round ($height_old * $factor);

    }
    else {
      $final_width = ( $width <= 0 ) ? $width_old : $width;
      $final_height = ( $height <= 0 ) ? $height_old : $height;
    }

    switch ( $info[2] ) {
      case IMAGETYPE_GIF:
        $image = imagecreatefromgif($file);
      break;
      case IMAGETYPE_JPEG:
        $image = imagecreatefromjpeg($file);
      break;
      case IMAGETYPE_PNG:
        $image = imagecreatefrompng($file);
      break;
      default:
        return false;
    }

    if ( $info[2] == IMAGETYPE_GIF )
        $image_resized = imagecreate( $final_width, $final_height );
    else
        $image_resized = imagecreatetruecolor( $final_width, $final_height );

    if ( ($info[2] == IMAGETYPE_GIF) || ($info[2] == IMAGETYPE_PNG) ) {
      $trnprt_indx = imagecolortransparent($image);

      // If we have a specific transparent color
      if ($trnprt_indx >= 0) {

        // Get the original image's transparent color's RGB values
        $trnprt_color    = imagecolorsforindex($image, $trnprt_indx);

        // Allocate the same color in the new image resource
        $trnprt_indx    = imagecolorallocate($image_resized, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);

        // Completely fill the background of the new image with allocated color.
        imagefill($image_resized, 0, 0, $trnprt_indx);

        // Set the background color for new image to transparent
        imagecolortransparent($image_resized, $trnprt_indx);


      } 
      // Always make a transparent background color for PNGs that don't have one allocated already
      elseif ($info[2] == IMAGETYPE_PNG) {

        // Turn off transparency blending (temporarily)
        imagealphablending($image_resized, false);

        // Create a new transparent color for image
        $color = imagecolorallocatealpha($image_resized, 0, 0, 0, 127);

        // Completely fill the background of the new image with allocated color.
        imagefill($image_resized, 0, 0, $color);

        // Restore transparency blending
        imagesavealpha($image_resized, true);
      }
    }

    imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $final_width, $final_height, $width_old, $height_old);
    if ( $delete_original ) {
      if ( $use_linux_commands )
        exec('rm '.$file);
      else
        @unlink($file);
    }

    switch ( strtolower($output) ) {
      case 'browser':
        $mime = image_type_to_mime_type($info[2]);
        header("Content-type: $mime");
        $output = NULL;
      break;
      case 'file':
        $output = $file;
      break;
      case 'return':
        return $image_resized;
      break;
      default:
      break;
    }

    switch ( $info[2] ) {
      case IMAGETYPE_GIF:
        imagegif($image_resized, $output);
      break;
      case IMAGETYPE_JPEG:
        imagejpeg($image_resized, $output);
      break;
      case IMAGETYPE_PNG:
        imagepng($image_resized, $output);
      break;
      default:
        return false;
    }

    return true;
}
?>

Answer 5

这可能听起来不像你在寻找......

但我最终使用<img />代码并根据需要更改了height和width属性。

使用CSS转换背景图像

5 个答案: